@bigbinary/neeto-molecules 3.15.43 → 3.15.45

package/dist/IconPicker.js

@@ -0,0 +1,1159 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { createElement, PureComponent, memo, useState, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import useDebounce from '@bigbinary/neeto-commons-frontend/react-utils/useDebounce';
+import Close from '@bigbinary/neeto-icons/Close';
+import Dropdown from '@bigbinary/neetoui/Dropdown';
+import Label from '@bigbinary/neetoui/Label';
+import Input from '@bigbinary/neetoui/Input';
+import Button from '@bigbinary/neetoui/Button';
+import Typography from '@bigbinary/neetoui/Typography';
+import { useTranslation } from 'react-i18next';
+import _extends from '@babel/runtime/helpers/esm/extends';
+import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
+import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
+import '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
+import Tooltip from '@bigbinary/neetoui/Tooltip';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { n } from './inject-css-DmrvuTKK.js';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
+
+var safeIsNaN = Number.isNaN ||
+    function ponyfill(value) {
+        return typeof value === 'number' && value !== value;
+    };
+function isEqual(first, second) {
+    if (first === second) {
+        return true;
+    }
+    if (safeIsNaN(first) && safeIsNaN(second)) {
+        return true;
+    }
+    return false;
+}
+function areInputsEqual(newInputs, lastInputs) {
+    if (newInputs.length !== lastInputs.length) {
+        return false;
+    }
+    for (var i = 0; i < newInputs.length; i++) {
+        if (!isEqual(newInputs[i], lastInputs[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function memoizeOne(resultFn, isEqual) {
+    if (isEqual === void 0) { isEqual = areInputsEqual; }
+    var lastThis;
+    var lastArgs = [];
+    var lastResult;
+    var calledOnce = false;
+    function memoized() {
+        var newArgs = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            newArgs[_i] = arguments[_i];
+        }
+        if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
+            return lastResult;
+        }
+        lastResult = resultFn.apply(this, newArgs);
+        calledOnce = true;
+        lastThis = this;
+        lastArgs = newArgs;
+        return lastResult;
+    }
+    return memoized;
+}
+
+// Animation frame based implementation of setTimeout.
+// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
+var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
+var now = hasNativePerformanceNow ? function () {
+  return performance.now();
+} : function () {
+  return Date.now();
+};
+function cancelTimeout(timeoutID) {
+  cancelAnimationFrame(timeoutID.id);
+}
+function requestTimeout(callback, delay) {
+  var start = now();
+
+  function tick() {
+    if (now() - start >= delay) {
+      callback.call(null);
+    } else {
+      timeoutID.id = requestAnimationFrame(tick);
+    }
+  }
+
+  var timeoutID = {
+    id: requestAnimationFrame(tick)
+  };
+  return timeoutID;
+}
+
+var size = -1; // This utility copied from "dom-helpers" package.
+
+function getScrollbarSize(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+
+  if (size === -1 || recalculate) {
+    var div = document.createElement('div');
+    var style = div.style;
+    style.width = '50px';
+    style.height = '50px';
+    style.overflow = 'scroll';
+    document.body.appendChild(div);
+    size = div.offsetWidth - div.clientWidth;
+    document.body.removeChild(div);
+  }
+
+  return size;
+}
+var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
+// The safest way to check this is to intentionally set a negative offset,
+// and then verify that the subsequent "scroll" event matches the negative offset.
+// If it does not match, then we can assume a non-standard RTL scroll implementation.
+
+function getRTLOffsetType(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+
+  if (cachedRTLResult === null || recalculate) {
+    var outerDiv = document.createElement('div');
+    var outerStyle = outerDiv.style;
+    outerStyle.width = '50px';
+    outerStyle.height = '50px';
+    outerStyle.overflow = 'scroll';
+    outerStyle.direction = 'rtl';
+    var innerDiv = document.createElement('div');
+    var innerStyle = innerDiv.style;
+    innerStyle.width = '100px';
+    innerStyle.height = '100px';
+    outerDiv.appendChild(innerDiv);
+    document.body.appendChild(outerDiv);
+
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = 'positive-descending';
+    } else {
+      outerDiv.scrollLeft = 1;
+
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = 'negative';
+      } else {
+        cachedRTLResult = 'positive-ascending';
+      }
+    }
+
+    document.body.removeChild(outerDiv);
+    return cachedRTLResult;
+  }
+
+  return cachedRTLResult;
+}
+
+var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
+
+var defaultItemKey = function defaultItemKey(_ref) {
+  var columnIndex = _ref.columnIndex;
+      _ref.data;
+      var rowIndex = _ref.rowIndex;
+  return rowIndex + ":" + columnIndex;
+}; // In DEV mode, this Set helps us only log a warning once per component instance.
+// This avoids spamming the console every time a render happens.
+
+
+var devWarningsOverscanCount = null;
+var devWarningsOverscanRowsColumnsCount = null;
+var devWarningsTagName = null;
+
+if (process.env.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
+    devWarningsOverscanCount = /*#__PURE__*/new WeakSet();
+    devWarningsOverscanRowsColumnsCount = /*#__PURE__*/new WeakSet();
+    devWarningsTagName = /*#__PURE__*/new WeakSet();
+  }
+}
+
+function createGridComponent(_ref2) {
+  var _class;
+
+  var getColumnOffset = _ref2.getColumnOffset,
+      getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,
+      getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,
+      getColumnWidth = _ref2.getColumnWidth,
+      getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,
+      getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,
+      getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,
+      getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,
+      getRowHeight = _ref2.getRowHeight,
+      getRowOffset = _ref2.getRowOffset,
+      getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,
+      getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,
+      initInstanceProps = _ref2.initInstanceProps,
+      shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,
+      validateProps = _ref2.validateProps;
+  return _class = /*#__PURE__*/function (_PureComponent) {
+    _inheritsLoose(Grid, _PureComponent);
+
+    // Always use explicit constructor for React components.
+    // It produces less code after transpilation. (#26)
+    // eslint-disable-next-line no-useless-constructor
+    function Grid(props) {
+      var _this;
+
+      _this = _PureComponent.call(this, props) || this;
+      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_this));
+      _this._resetIsScrollingTimeoutId = null;
+      _this._outerRef = void 0;
+      _this.state = {
+        instance: _assertThisInitialized(_this),
+        isScrolling: false,
+        horizontalScrollDirection: 'forward',
+        scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,
+        scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,
+        scrollUpdateWasRequested: false,
+        verticalScrollDirection: 'forward'
+      };
+      _this._callOnItemsRendered = void 0;
+      _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {
+        return _this.props.onItemsRendered({
+          overscanColumnStartIndex: overscanColumnStartIndex,
+          overscanColumnStopIndex: overscanColumnStopIndex,
+          overscanRowStartIndex: overscanRowStartIndex,
+          overscanRowStopIndex: overscanRowStopIndex,
+          visibleColumnStartIndex: visibleColumnStartIndex,
+          visibleColumnStopIndex: visibleColumnStopIndex,
+          visibleRowStartIndex: visibleRowStartIndex,
+          visibleRowStopIndex: visibleRowStopIndex
+        });
+      });
+      _this._callOnScroll = void 0;
+      _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          horizontalScrollDirection: horizontalScrollDirection,
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          verticalScrollDirection: verticalScrollDirection,
+          scrollUpdateWasRequested: scrollUpdateWasRequested
+        });
+      });
+      _this._getItemStyle = void 0;
+
+      _this._getItemStyle = function (rowIndex, columnIndex) {
+        var _this$props = _this.props,
+            columnWidth = _this$props.columnWidth,
+            direction = _this$props.direction,
+            rowHeight = _this$props.rowHeight;
+
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);
+
+        var key = rowIndex + ":" + columnIndex;
+        var style;
+
+        if (itemStyleCache.hasOwnProperty(key)) {
+          style = itemStyleCache[key];
+        } else {
+          var _offset = getColumnOffset(_this.props, columnIndex, _this._instanceProps);
+
+          var isRtl = direction === 'rtl';
+          itemStyleCache[key] = style = {
+            position: 'absolute',
+            left: isRtl ? undefined : _offset,
+            right: isRtl ? _offset : undefined,
+            top: getRowOffset(_this.props, rowIndex, _this._instanceProps),
+            height: getRowHeight(_this.props, rowIndex, _this._instanceProps),
+            width: getColumnWidth(_this.props, columnIndex, _this._instanceProps)
+          };
+        }
+
+        return style;
+      };
+
+      _this._getItemStyleCache = void 0;
+      _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
+        return {};
+      });
+
+      _this._onScroll = function (event) {
+        var _event$currentTarget = event.currentTarget,
+            clientHeight = _event$currentTarget.clientHeight,
+            clientWidth = _event$currentTarget.clientWidth,
+            scrollLeft = _event$currentTarget.scrollLeft,
+            scrollTop = _event$currentTarget.scrollTop,
+            scrollHeight = _event$currentTarget.scrollHeight,
+            scrollWidth = _event$currentTarget.scrollWidth;
+
+        _this.setState(function (prevState) {
+          if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
+            // Scroll position may have been updated by cDM/cDU,
+            // In which case we don't need to trigger another render,
+            // And we don't want to update state.isScrolling.
+            return null;
+          }
+
+          var direction = _this.props.direction; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+          // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
+          // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
+
+          var calculatedScrollLeft = scrollLeft;
+
+          if (direction === 'rtl') {
+            switch (getRTLOffsetType()) {
+              case 'negative':
+                calculatedScrollLeft = -scrollLeft;
+                break;
+
+              case 'positive-descending':
+                calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
+                break;
+            }
+          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
+
+
+          calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));
+          var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+          return {
+            isScrolling: true,
+            horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+            scrollLeft: calculatedScrollLeft,
+            scrollTop: calculatedScrollTop,
+            verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+
+      _this._outerRefSetter = function (ref) {
+        var outerRef = _this.props.outerRef;
+        _this._outerRef = ref;
+
+        if (typeof outerRef === 'function') {
+          outerRef(ref);
+        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
+          outerRef.current = ref;
+        }
+      };
+
+      _this._resetIsScrollingDebounced = function () {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          cancelTimeout(_this._resetIsScrollingTimeoutId);
+        }
+
+        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
+      };
+
+      _this._resetIsScrolling = function () {
+        _this._resetIsScrollingTimeoutId = null;
+
+        _this.setState({
+          isScrolling: false
+        }, function () {
+          // Clear style cache after state update has been committed.
+          // This way we don't break pure sCU for items that don't use isScrolling param.
+          _this._getItemStyleCache(-1);
+        });
+      };
+
+      return _this;
+    }
+
+    Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+      validateSharedProps(nextProps, prevState);
+      validateProps(nextProps);
+      return null;
+    };
+
+    var _proto = Grid.prototype;
+
+    _proto.scrollTo = function scrollTo(_ref3) {
+      var scrollLeft = _ref3.scrollLeft,
+          scrollTop = _ref3.scrollTop;
+
+      if (scrollLeft !== undefined) {
+        scrollLeft = Math.max(0, scrollLeft);
+      }
+
+      if (scrollTop !== undefined) {
+        scrollTop = Math.max(0, scrollTop);
+      }
+
+      this.setState(function (prevState) {
+        if (scrollLeft === undefined) {
+          scrollLeft = prevState.scrollLeft;
+        }
+
+        if (scrollTop === undefined) {
+          scrollTop = prevState.scrollTop;
+        }
+
+        if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
+          return null;
+        }
+
+        return {
+          horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          scrollUpdateWasRequested: true,
+          verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+
+    _proto.scrollToItem = function scrollToItem(_ref4) {
+      var _ref4$align = _ref4.align,
+          align = _ref4$align === void 0 ? 'auto' : _ref4$align,
+          columnIndex = _ref4.columnIndex,
+          rowIndex = _ref4.rowIndex;
+      var _this$props2 = this.props,
+          columnCount = _this$props2.columnCount,
+          height = _this$props2.height,
+          rowCount = _this$props2.rowCount,
+          width = _this$props2.width;
+      var _this$state = this.state,
+          scrollLeft = _this$state.scrollLeft,
+          scrollTop = _this$state.scrollTop;
+      var scrollbarSize = getScrollbarSize();
+
+      if (columnIndex !== undefined) {
+        columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
+      }
+
+      if (rowIndex !== undefined) {
+        rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
+      }
+
+      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); // The scrollbar size should be considered when scrolling an item into view,
+      // to ensure it's fully visible.
+      // But we only need to account for its size when it's actually visible.
+
+      var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
+      var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
+      this.scrollTo({
+        scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,
+        scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop
+      });
+    };
+
+    _proto.componentDidMount = function componentDidMount() {
+      var _this$props3 = this.props,
+          initialScrollLeft = _this$props3.initialScrollLeft,
+          initialScrollTop = _this$props3.initialScrollTop;
+
+      if (this._outerRef != null) {
+        var outerRef = this._outerRef;
+
+        if (typeof initialScrollLeft === 'number') {
+          outerRef.scrollLeft = initialScrollLeft;
+        }
+
+        if (typeof initialScrollTop === 'number') {
+          outerRef.scrollTop = initialScrollTop;
+        }
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      var direction = this.props.direction;
+      var _this$state2 = this.state,
+          scrollLeft = _this$state2.scrollLeft,
+          scrollTop = _this$state2.scrollTop,
+          scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+        // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
+        // So we need to determine which browser behavior we're dealing with, and mimic it.
+        var outerRef = this._outerRef;
+
+        if (direction === 'rtl') {
+          switch (getRTLOffsetType()) {
+            case 'negative':
+              outerRef.scrollLeft = -scrollLeft;
+              break;
+
+            case 'positive-ascending':
+              outerRef.scrollLeft = scrollLeft;
+              break;
+
+            default:
+              var clientWidth = outerRef.clientWidth,
+                  scrollWidth = outerRef.scrollWidth;
+              outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
+          }
+        } else {
+          outerRef.scrollLeft = Math.max(0, scrollLeft);
+        }
+
+        outerRef.scrollTop = Math.max(0, scrollTop);
+      }
+
+      this._callPropsCallbacks();
+    };
+
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    };
+
+    _proto.render = function render() {
+      var _this$props4 = this.props,
+          children = _this$props4.children,
+          className = _this$props4.className,
+          columnCount = _this$props4.columnCount,
+          direction = _this$props4.direction,
+          height = _this$props4.height,
+          innerRef = _this$props4.innerRef,
+          innerElementType = _this$props4.innerElementType,
+          innerTagName = _this$props4.innerTagName,
+          itemData = _this$props4.itemData,
+          _this$props4$itemKey = _this$props4.itemKey,
+          itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,
+          outerElementType = _this$props4.outerElementType,
+          outerTagName = _this$props4.outerTagName,
+          rowCount = _this$props4.rowCount,
+          style = _this$props4.style,
+          useIsScrolling = _this$props4.useIsScrolling,
+          width = _this$props4.width;
+      var isScrolling = this.state.isScrolling;
+
+      var _this$_getHorizontalR = this._getHorizontalRangeToRender(),
+          columnStartIndex = _this$_getHorizontalR[0],
+          columnStopIndex = _this$_getHorizontalR[1];
+
+      var _this$_getVerticalRan = this._getVerticalRangeToRender(),
+          rowStartIndex = _this$_getVerticalRan[0],
+          rowStopIndex = _this$_getVerticalRan[1];
+
+      var items = [];
+
+      if (columnCount > 0 && rowCount) {
+        for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
+          for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
+            items.push(createElement(children, {
+              columnIndex: _columnIndex,
+              data: itemData,
+              isScrolling: useIsScrolling ? isScrolling : undefined,
+              key: itemKey({
+                columnIndex: _columnIndex,
+                data: itemData,
+                rowIndex: _rowIndex
+              }),
+              rowIndex: _rowIndex,
+              style: this._getItemStyle(_rowIndex, _columnIndex)
+            }));
+          }
+        }
+      } // Read this value AFTER items have been created,
+      // So their actual sizes (if variable) are taken into consideration.
+
+
+      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
+      return createElement(outerElementType || outerTagName || 'div', {
+        className: className,
+        onScroll: this._onScroll,
+        ref: this._outerRefSetter,
+        style: _extends({
+          position: 'relative',
+          height: height,
+          width: width,
+          overflow: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          willChange: 'transform',
+          direction: direction
+        }, style)
+      }, createElement(innerElementType || innerTagName || 'div', {
+        children: items,
+        ref: innerRef,
+        style: {
+          height: estimatedTotalHeight,
+          pointerEvents: isScrolling ? 'none' : undefined,
+          width: estimatedTotalWidth
+        }
+      }));
+    };
+
+    _proto._callPropsCallbacks = function _callPropsCallbacks() {
+      var _this$props5 = this.props,
+          columnCount = _this$props5.columnCount,
+          onItemsRendered = _this$props5.onItemsRendered,
+          onScroll = _this$props5.onScroll,
+          rowCount = _this$props5.rowCount;
+
+      if (typeof onItemsRendered === 'function') {
+        if (columnCount > 0 && rowCount > 0) {
+          var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),
+              _overscanColumnStartIndex = _this$_getHorizontalR2[0],
+              _overscanColumnStopIndex = _this$_getHorizontalR2[1],
+              _visibleColumnStartIndex = _this$_getHorizontalR2[2],
+              _visibleColumnStopIndex = _this$_getHorizontalR2[3];
+
+          var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),
+              _overscanRowStartIndex = _this$_getVerticalRan2[0],
+              _overscanRowStopIndex = _this$_getVerticalRan2[1],
+              _visibleRowStartIndex = _this$_getVerticalRan2[2],
+              _visibleRowStopIndex = _this$_getVerticalRan2[3];
+
+          this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);
+        }
+      }
+
+      if (typeof onScroll === 'function') {
+        var _this$state3 = this.state,
+            _horizontalScrollDirection = _this$state3.horizontalScrollDirection,
+            _scrollLeft = _this$state3.scrollLeft,
+            _scrollTop = _this$state3.scrollTop,
+            _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,
+            _verticalScrollDirection = _this$state3.verticalScrollDirection;
+
+        this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);
+      }
+    } // Lazily create and cache item styles while scrolling,
+    // So that pure component sCU will prevent re-renders.
+    // We maintain this cache, and pass a style prop rather than index,
+    // So that List can clear cached styles and force item re-render if necessary.
+    ;
+
+    _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
+      var _this$props6 = this.props,
+          columnCount = _this$props6.columnCount,
+          overscanColumnCount = _this$props6.overscanColumnCount,
+          overscanColumnsCount = _this$props6.overscanColumnsCount,
+          overscanCount = _this$props6.overscanCount,
+          rowCount = _this$props6.rowCount;
+      var _this$state4 = this.state,
+          horizontalScrollDirection = _this$state4.horizontalScrollDirection,
+          isScrolling = _this$state4.isScrolling,
+          scrollLeft = _this$state4.scrollLeft;
+      var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
+      var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
+      var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {
+      var _this$props7 = this.props,
+          columnCount = _this$props7.columnCount,
+          overscanCount = _this$props7.overscanCount,
+          overscanRowCount = _this$props7.overscanRowCount,
+          overscanRowsCount = _this$props7.overscanRowsCount,
+          rowCount = _this$props7.rowCount;
+      var _this$state5 = this.state,
+          isScrolling = _this$state5.isScrolling,
+          verticalScrollDirection = _this$state5.verticalScrollDirection,
+          scrollTop = _this$state5.scrollTop;
+      var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;
+
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+
+      var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
+      var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+
+      var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
+      var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+
+    return Grid;
+  }(PureComponent), _class.defaultProps = {
+    direction: 'ltr',
+    itemData: undefined,
+    useIsScrolling: false
+  }, _class;
+}
+
+var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
+  var children = _ref5.children,
+      direction = _ref5.direction,
+      height = _ref5.height,
+      innerTagName = _ref5.innerTagName,
+      outerTagName = _ref5.outerTagName,
+      overscanColumnsCount = _ref5.overscanColumnsCount,
+      overscanCount = _ref5.overscanCount,
+      overscanRowsCount = _ref5.overscanRowsCount,
+      width = _ref5.width;
+  var instance = _ref6.instance;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof overscanCount === 'number') {
+      if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
+        devWarningsOverscanCount.add(instance);
+        console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
+      }
+    }
+
+    if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {
+      if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {
+        devWarningsOverscanRowsColumnsCount.add(instance);
+        console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
+      }
+    }
+
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
+        devWarningsTagName.add(instance);
+        console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
+      }
+    }
+
+    if (children == null) {
+      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
+    }
+
+    switch (direction) {
+      case 'ltr':
+      case 'rtl':
+        // Valid values
+        break;
+
+      default:
+        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
+    }
+
+    if (typeof width !== 'number') {
+      throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
+    }
+
+    if (typeof height !== 'number') {
+      throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
+    }
+  }
+};
+
+if (process.env.NODE_ENV !== 'production') ;
+
+var FixedSizeGrid = /*#__PURE__*/createGridComponent({
+  getColumnOffset: function getColumnOffset(_ref, index) {
+    var columnWidth = _ref.columnWidth;
+    return index * columnWidth;
+  },
+  getColumnWidth: function getColumnWidth(_ref2, index) {
+    var columnWidth = _ref2.columnWidth;
+    return columnWidth;
+  },
+  getRowOffset: function getRowOffset(_ref3, index) {
+    var rowHeight = _ref3.rowHeight;
+    return index * rowHeight;
+  },
+  getRowHeight: function getRowHeight(_ref4, index) {
+    var rowHeight = _ref4.rowHeight;
+    return rowHeight;
+  },
+  getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
+    var rowCount = _ref5.rowCount,
+        rowHeight = _ref5.rowHeight;
+    return rowHeight * rowCount;
+  },
+  getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
+    var columnCount = _ref6.columnCount,
+        columnWidth = _ref6.columnWidth;
+    return columnWidth * columnCount;
+  },
+  getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {
+    var columnCount = _ref7.columnCount,
+        columnWidth = _ref7.columnWidth,
+        width = _ref7.width;
+    var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);
+    var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
+    var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
+
+    if (align === 'smart') {
+      if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+        if (middleOffset < Math.ceil(width / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
+          return lastColumnOffset; // near the end
+        } else {
+          return middleOffset;
+        }
+
+      case 'auto':
+      default:
+        if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
+          return scrollLeft;
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollLeft < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {
+    var rowHeight = _ref8.rowHeight,
+        height = _ref8.height,
+        rowCount = _ref8.rowCount;
+    var lastRowOffset = Math.max(0, rowCount * rowHeight - height);
+    var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
+    var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
+
+    if (align === 'smart') {
+      if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
+        align = 'auto';
+      } else {
+        align = 'center';
+      }
+    }
+
+    switch (align) {
+      case 'start':
+        return maxOffset;
+
+      case 'end':
+        return minOffset;
+
+      case 'center':
+        // "Centered" offset is usually the average of the min and max.
+        // But near the edges of the list, this doesn't hold true.
+        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
+
+        if (middleOffset < Math.ceil(height / 2)) {
+          return 0; // near the beginning
+        } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
+          return lastRowOffset; // near the end
+        } else {
+          return middleOffset;
+        }
+
+      case 'auto':
+      default:
+        if (scrollTop >= minOffset && scrollTop <= maxOffset) {
+          return scrollTop;
+        } else if (minOffset > maxOffset) {
+          // Because we only take into account the scrollbar size when calculating minOffset
+          // this value can be larger than maxOffset when at the end of the list
+          return minOffset;
+        } else if (scrollTop < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+
+    }
+  },
+  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {
+    var columnWidth = _ref9.columnWidth,
+        columnCount = _ref9.columnCount;
+    return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft / columnWidth)));
+  },
+  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {
+    var columnWidth = _ref10.columnWidth,
+        columnCount = _ref10.columnCount,
+        width = _ref10.width;
+    var left = startIndex * columnWidth;
+    var numVisibleColumns = Math.ceil((width + scrollLeft - left) / columnWidth);
+    return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
+    ));
+  },
+  getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
+    var rowHeight = _ref11.rowHeight,
+        rowCount = _ref11.rowCount;
+    return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop / rowHeight)));
+  },
+  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {
+    var rowHeight = _ref12.rowHeight,
+        rowCount = _ref12.rowCount,
+        height = _ref12.height;
+    var top = startIndex * rowHeight;
+    var numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
+    return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
+    ));
+  },
+  initInstanceProps: function initInstanceProps(props) {// Noop
+  },
+  shouldResetStyleCacheOnItemSizeChange: true,
+  validateProps: function validateProps(_ref13) {
+    var columnWidth = _ref13.columnWidth,
+        rowHeight = _ref13.rowHeight;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof columnWidth !== 'number') {
+        throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
+      }
+
+      if (typeof rowHeight !== 'number') {
+        throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
+      }
+    }
+  }
+});
+
+var GRID_PROPERTIES = {
+  gridWidth: 300,
+  gridHeight: 300,
+  columnWidthDesktop: 100,
+  columnWidthMobile: 90,
+  rowHeight: 100,
+  columnCount: 3
+};
+var ICONS_LIST = ["10k", "10mp", "11mp", "123", "12mp", "13mp", "14mp", "15mp", "16mp", "17mp", "18_up_rating", "18mp", "19mp", "1k", "1k_plus", "1x_mobiledata", "1x_mobiledata_badge", "20mp", "21mp", "22mp", "23mp", "24mp", "2k", "2k_plus", "2mp", "30fps", "30fps_select", "360", "3d_rotation", "3g_mobiledata", "3g_mobiledata_badge", "3k", "3k_plus", "3mp", "3p", "4g_mobiledata", "4g_mobiledata_badge", "4g_plus_mobiledata", "4k", "4k_plus", "4mp", "50mp", "5g", "5g_mobiledata_badge", "5k", "5k_plus", "5mp", "60fps", "60fps_select", "6_ft_apart", "6k", "6k_plus", "6mp", "7k", "7k_plus", "7mp", "8k", "8k_plus", "8mp", "9k", "9k_plus", "9mp", "abc", "ac_unit", "accessibility", "accessibility_new", "accessible", "accessible_forward", "account_balance", "account_balance_wallet", "account_box", "account_circle", "account_circle_off", "account_tree", "activity_zone", "acute", "ad_off", "ad_units", "adb", "add", "add_a_photo", "add_alert", "add_box", "add_business", "add_call", "add_card", "add_chart", "add_circle", "add_comment", "add_home", "add_home_work", "add_link", "add_location", "add_location_alt", "add_moderator", "add_notes", "add_photo_alternate", "add_reaction", "add_road", "add_shopping_cart", "add_task", "add_to_drive", "add_to_home_screen", "add_to_photos", "add_to_queue", "adf_scanner", "adjust", "admin_meds", "admin_panel_settings", "ads_click", "agender", "agriculture", "air", "air_freshener", "air_purifier_gen", "airline_seat_flat", "airline_seat_flat_angled", "airline_seat_individual_suite", "airline_seat_legroom_extra", "airline_seat_legroom_normal", "airline_seat_legroom_reduced", "airline_seat_recline_extra", "airline_seat_recline_normal", "airline_stops", "airlines", "airplane_ticket", "airplanemode_active", "airplanemode_inactive", "airplay", "airport_shuttle", "airware", "airwave", "alarm", "alarm_add", "alarm_off", "alarm_on", "alarm_smart_wake", "album", "align_center", "align_end", "align_flex_center", "align_flex_end", "align_flex_start", "align_horizontal_center", "align_horizontal_left", "align_horizontal_right", "align_items_stretch", "align_justify_center", "align_justify_flex_end", "align_justify_flex_start", "align_justify_space_around", "align_justify_space_between", "align_justify_space_even", "align_justify_stretch", "align_self_stretch", "align_space_around", "align_space_between", "align_space_even", "align_start", "align_stretch", "align_vertical_bottom", "align_vertical_center", "align_vertical_top", "all_inbox", "all_inclusive", "all_match", "all_out", "allergies", "allergy", "alt_route", "alternate_email", "altitude", "ambient_screen", "ambulance", "amend", "amp_stories", "analytics", "anchor", "android", "animation", "aod", "aod_tablet", "aod_watch", "apartment", "api", "apk_document", "apk_install", "app_badging", "app_blocking", "app_registration", "app_shortcut", "approval", "approval_delegation", "apps", "apps_outage", "architecture", "archive", "area_chart", "arming_countdown", "arrow_and_edge", "arrow_back", "arrow_back_ios", "arrow_back_ios_new", "arrow_circle_down", "arrow_circle_left", "arrow_circle_right", "arrow_circle_up", "arrow_downward", "arrow_drop_down", "arrow_drop_down_circle", "arrow_drop_up", "arrow_forward", "arrow_forward_ios", "arrow_insert", "arrow_left", "arrow_or_edge", "arrow_outward", "arrow_range", "arrow_right", "arrow_right_alt", "arrow_selector_tool", "arrow_top_left", "arrow_top_right", "arrow_upward", "arrows_more_down", "arrows_more_up", "arrows_outward", "art_track", "article", "aspect_ratio", "assignment", "assignment_add", "assignment_ind", "assignment_late", "assignment_return", "assignment_returned", "assignment_turned_in", "assist_walker", "assistant", "assistant_direction", "assistant_navigation", "assistant_on_hub", "assured_workload", "astrophotography_auto", "astrophotography_off", "atm", "atr", "attach_email", "attach_file", "attach_file_add", "attach_money", "attachment", "attractions", "attribution", "audio_file", "audio_video_receiver", "auto_activity_zone", "auto_awesome", "auto_awesome_mosaic", "auto_awesome_motion", "auto_delete", "auto_detect_voice", "auto_fix", "auto_fix_high", "auto_fix_normal", "auto_fix_off", "auto_graph", "auto_label", "auto_meeting_room", "auto_mode", "auto_read_pause", "auto_read_play", "auto_schedule", "auto_stories", "auto_videocam", "autofps_select", "autopause", "autopay", "autoplay", "autorenew", "autostop", "av_timer", "avg_pace", "avg_time", "award_star", "azm", "baby_changing_station", "back_hand", "back_to_tab", "background_dot_large", "background_grid_small", "background_replace", "backlight_high", "backlight_low", "backpack", "backspace", "backup", "backup_table", "badge", "badge_critical_battery", "bakery_dining", "balance", "balcony", "ballot", "bar_chart", "bar_chart_4_bars", "barcode", "barcode_reader", "barcode_scanner", "barefoot", "batch_prediction", "bath_outdoor", "bath_private", "bath_public_large", "bathroom", "bathtub", "battery_0_bar", "battery_1_bar", "battery_20", "battery_2_bar", "battery_30", "battery_3_bar", "battery_4_bar", "battery_50", "battery_5_bar", "battery_60", "battery_6_bar", "battery_80", "battery_90", "battery_alert", "battery_change", "battery_charging_20", "battery_charging_30", "battery_charging_50", "battery_charging_60", "battery_charging_80", "battery_charging_90", "battery_charging_full", "battery_error", "battery_full", "battery_full_alt", "battery_horiz_000", "battery_horiz_050", "battery_horiz_075", "battery_low", "battery_plus", "battery_profile", "battery_saver", "battery_share", "battery_status_good", "battery_unknown", "battery_vert_005", "battery_vert_020", "battery_vert_050", "battery_very_low", "beach_access", "bed", "bedroom_baby", "bedroom_child", "bedroom_parent", "bedtime", "bedtime_off", "beenhere", "bento", "bia", "bike_scooter", "biotech", "blanket", "blender", "blind", "blinds", "blinds_closed", "block", "blood_pressure", "bloodtype", "bluetooth", "bluetooth_connected", "bluetooth_disabled", "bluetooth_drive", "bluetooth_searching", "blur_circular", "blur_linear", "blur_medium", "blur_off", "blur_on", "blur_short", "body_fat", "body_system", "bolt", "book", "book_online", "bookmark", "bookmark_add", "bookmark_added", "bookmark_manager", "bookmark_remove", "bookmarks", "border_all", "border_bottom", "border_clear", "border_color", "border_horizontal", "border_inner", "border_left", "border_outer", "border_right", "border_style", "border_top", "border_vertical", "bottom_panel_close", "bottom_panel_open", "bottom_right_click", "boy", "branding_watermark", "breakfast_dining", "breaking_news_alt_1", "breastfeeding", "brightness_1", "brightness_2", "brightness_3", "brightness_4", "brightness_5", "brightness_6", "brightness_7", "brightness_auto", "brightness_empty", "brightness_high", "brightness_low", "brightness_medium", "bring_your_own_ip", "broadcast_on_home", "broadcast_on_personal", "broken_image", "browse_activity", "browse_gallery", "browser_updated", "brunch_dining", "brush", "bubble_chart", "bubbles", "bug_report", "build", "build_circle", "bungalow", "burst_mode", "bus_alert", "business_center", "business_chip", "cabin", "cable", "cached", "cake", "cake_add", "calculate", "calendar_add_on", "calendar_apps_script", "calendar_month", "calendar_today", "calendar_view_day", "calendar_view_month", "calendar_view_week", "call", "call_end", "call_log", "call_made", "call_merge", "call_missed", "call_missed_outgoing", "call_quality", "call_received", "call_split", "call_to_action", "camera", "camera_enhance", "camera_front", "camera_indoor", "camera_outdoor", "camera_rear", "camera_roll", "camera_video", "cameraswitch", "campaign", "camping", "cancel", "cancel_presentation", "cancel_schedule_send", "candlestick_chart", "captive_portal", "capture", "car_crash", "car_rental", "car_repair", "card_membership", "card_travel", "cardiology", "carpenter", "cases", "casino", "cast", "cast_connected", "cast_for_education", "cast_pause", "cast_warning", "castle", "category", "celebration", "cell_merge", "cell_tower", "cell_wifi", "center_focus_strong", "center_focus_weak", "chair", "chair_alt", "chalet", "change_circle", "change_history", "charger", "charging_station", "chart_data", "chat", "chat_add_on", "chat_apps_script", "chat_bubble", "chat_error", "chat_paste_go", "check", "check_box", "check_box_outline_blank", "check_circle", "check_in_out", "check_indeterminate_small", "check_small", "checklist", "checklist_rtl", "checkroom", "cheer", "chess", "chevron_left", "chevron_right", "child_care", "child_friendly", "chip_extraction", "chrome_reader_mode", "chromecast_2", "chromecast_device", "chronic", "church", "cinematic_blur", "circle", "circle_notifications", "clarify", "clean_hands", "cleaning_bucket", "cleaning_services", "clear_all", "clear_day", "clear_night", "climate_mini_split", "clinical_notes", "clock_loader_10", "clock_loader_20", "clock_loader_40", "clock_loader_60", "clock_loader_80", "clock_loader_90", "close", "close_fullscreen", "closed_caption", "closed_caption_disabled", "cloud", "cloud_circle", "cloud_done", "cloud_download", "cloud_off", "cloud_queue", "cloud_sync", "cloud_upload", "cloudy", "cloudy_snowing", "co2", "co_present", "code", "code_blocks", "code_off", "coffee", "coffee_maker", "cognition", "collections_bookmark", "colorize", "comic_bubble", "comment", "comment_bank", "comments_disabled", "commit", "communication", "commute", "compare", "compare_arrows", "compass_calibration", "component_exchange", "compost", "compress", "computer", "conditions", "confirmation_number", "congenital", "connect_without_contact", "connected_tv", "connecting_airports", "construction", "contact_emergency", "contact_mail", "contact_page", "contact_phone", "contact_support", "contactless", "contactless_off", "contacts", "content_copy", "content_cut", "content_paste", "content_paste_go", "content_paste_off", "content_paste_search", "contrast", "contrast_rtl_off", "control_camera", "control_point_duplicate", "controller_gen", "conversion_path", "conversion_path_off", "conveyor_belt", "cookie", "cookie_off", "cooking", "cool_to_dry", "copy_all", "copyright", "coronavirus", "corporate_fare", "cottage", "counter_0", "counter_1", "counter_2", "counter_3", "counter_4", "counter_5", "counter_6", "counter_7", "counter_8", "counter_9", "countertops", "create_new_folder", "credit_card", "credit_card_off", "credit_score", "crib", "crisis_alert", "crop", "crop_16_9", "crop_3_2", "crop_5_4", "crop_7_5", "crop_free", "crop_landscape", "crop_portrait", "crop_rotate", "crop_square", "crossword", "cruelty_free", "css", "currency_bitcoin", "currency_exchange", "currency_franc", "currency_lira", "currency_pound", "currency_ruble", "currency_rupee", "currency_yen", "currency_yuan", "curtains", "curtains_closed", "cut", "cycle", "cyclone", "dangerous", "dark_mode", "dashboard", "dashboard_customize", "data_alert", "data_array", "data_check", "data_exploration", "data_info_alert", "data_object", "data_saver_on", "data_thresholding", "data_usage", "database", "dataset", "dataset_linked", "date_range", "deblur", "deceased", "decimal_decrease", "decimal_increase", "deck", "dehaze", "delete", "delete_forever", "delete_sweep", "demography", "density_large", "density_medium", "density_small", "dentistry", "departure_board", "deployed_code", "deployed_code_alert", "deployed_code_history", "deployed_code_update", "dermatology", "description", "deselect", "design_services", "desk", "deskphone", "desktop_access_disabled", "desktop_mac", "desktop_windows", "details", "detection_and_zone", "detector", "detector_alarm", "detector_battery", "detector_co", "detector_offline", "detector_smoke", "detector_status", "developer_board", "developer_board_off", "developer_mode", "device_hub", "device_reset", "device_thermostat", "device_unknown", "devices", "devices_fold", "devices_off", "devices_other", "devices_wearables", "dew_point", "diagnosis", "dialer_sip", "dialpad", "diamond", "difference", "digital_out_of_home", "dining", "dinner_dining", "directions", "directions_alt", "directions_alt_off", "directions_bike", "directions_boat", "directions_bus", "directions_car", "directions_off", "directions_railway", "directions_run", "directions_subway", "directions_walk", "dirty_lens", "disabled_by_default", "disabled_visible", "disc_full", "discover_tune", "dishwasher_gen", "display_external_input", "display_settings", "distance", "diversity_1", "diversity_2", "diversity_3", "diversity_4", "dns", "do_not_disturb_off", "do_not_disturb_on", "do_not_disturb_on_total_silence", "do_not_step", "do_not_touch", "dock", "dock_to_bottom", "dock_to_left", "dock_to_right", "docs_add_on", "docs_apps_script", "document_scanner", "domain", "domain_add", "domain_disabled", "domain_verification", "domain_verification_off", "domino_mask", "done", "done_all", "done_outline", "donut_large", "donut_small", "door_back", "door_front", "door_open", "door_sensor", "door_sliding", "doorbell", "doorbell_3p", "doorbell_chime", "double_arrow", "downhill_skiing", "download", "download_done", "download_for_offline", "downloading", "draft", "draft_orders", "drafts", "drag_click", "drag_handle", "drag_indicator", "drag_pan", "draw", "draw_abstract", "draw_collage", "dresser", "drive_file_move", "drive_folder_upload", "dry", "dry_cleaning", "dual_screen", "duo", "dvr", "dynamic_feed", "dynamic_form", "e911_avatar", "e911_emergency", "e_mobiledata", "e_mobiledata_badge", "earbuds", "earbuds_battery", "early_on", "earthquake", "east", "ecg", "ecg_heart", "eco", "eda", "edgesensor_high", "edgesensor_low", "edit", "edit_attributes", "edit_calendar", "edit_document", "edit_location", "edit_location_alt", "edit_note", "edit_notifications", "edit_off", "edit_road", "edit_square", "egg", "egg_alt", "eject", "elderly", "elderly_woman", "electric_bike", "electric_bolt", "electric_car", "electric_meter", "electric_moped", "electric_rickshaw", "electric_scooter", "electrical_services", "elevation", "elevator", "emergency", "emergency_heat", "emergency_home", "emergency_recording", "emergency_share", "emoji_flags", "emoji_food_beverage", "emoji_nature", "emoji_objects", "emoji_people", "emoji_symbols", "emoji_transportation", "emoticon", "empty_dashboard", "enable", "endocrinology", "energy_program_saving", "energy_program_time_used", "energy_savings_leaf", "engineering", "enhanced_encryption", "ent", "equal", "equalizer", "error", "error_med", "escalator", "escalator_warning", "euro", "euro_symbol", "ev_charger", "ev_mobiledata_badge", "ev_shadow", "ev_station", "event", "event_available", "event_busy", "event_list", "event_note", "event_repeat", "event_seat", "event_upcoming", "exclamation", "exercise", "exit_to_app", "expand", "expand_circle_down", "expand_circle_up", "expand_content", "expand_less", "expand_more", "explicit", "explore", "explore_off", "explosion", "export_notes", "exposure", "exposure_neg_1", "exposure_neg_2", "exposure_plus_1", "exposure_plus_2", "exposure_zero", "extension", "extension_off", "eyeglasses", "face", "face_2", "face_3", "face_4", "face_5", "face_6", "face_retouching_natural", "face_retouching_off", "fact_check", "factory", "falling", "familiar_face_and_zone", "family_history", "family_restroom", "fast_forward", "fast_rewind", "fastfood", "faucet", "favorite", "fax", "featured_play_list", "featured_video", "feed", "female", "femur", "femur_alt", "fence", "fertile", "festival", "fiber_dvr", "fiber_manual_record", "fiber_new", "fiber_pin", "fiber_smart_record", "file_copy", "file_download_done", "file_download_off", "file_open", "file_present", "file_upload_off", "filter", "filter_1", "filter_2", "filter_3", "filter_4", "filter_5", "filter_6", "filter_7", "filter_8", "filter_9", "filter_9_plus", "filter_alt", "filter_alt_off", "filter_b_and_w", "filter_center_focus", "filter_drama", "filter_frames", "filter_hdr", "filter_list", "filter_list_off", "filter_none", "filter_tilt_shift", "filter_vintage", "finance_chip", "find_in_page", "find_replace", "fingerprint", "fire_extinguisher", "fire_hydrant", "fire_truck", "fireplace", "first_page", "fit_page", "fit_screen", "fit_width", "fitness_center", "flag", "flag_circle", "flaky", "flare", "flash_auto", "flash_off", "flash_on", "flashlight_off", "flashlight_on", "flatware", "flex_direction", "flex_no_wrap", "flex_wrap", "flight", "flight_class", "flight_land", "flight_takeoff", "flip", "flip_camera_android", "flip_camera_ios", "flip_to_back", "flip_to_front", "flood", "floor", "floor_lamp", "flowsheet", "fluid", "fluid_balance", "fluid_med", "fluorescent", "flutter_dash", "fmd_bad", "foggy", "folded_hands", "folder", "folder_copy", "folder_delete", "folder_managed", "folder_off", "folder_open", "folder_shared", "folder_special", "folder_supervised", "folder_zip", "follow_the_signs", "font_download", "font_download_off", "food_bank", "foot_bones", "footprint", "forest", "fork_left", "fork_right", "forklift", "format_align_center", "format_align_justify", "format_align_left", "format_align_right", "format_bold", "format_clear", "format_color_fill", "format_color_reset", "format_color_text", "format_h1", "format_h2", "format_h3", "format_h4", "format_h5", "format_h6", "format_image_left", "format_image_right", "format_indent_decrease", "format_indent_increase", "format_ink_highlighter", "format_italic", "format_letter_spacing", "format_letter_spacing_2", "format_letter_spacing_standard", "format_letter_spacing_wide", "format_letter_spacing_wider", "format_line_spacing", "format_list_bulleted", "format_list_bulleted_add", "format_list_numbered", "format_list_numbered_rtl", "format_overline", "format_paint", "format_paragraph", "format_quote", "format_shapes", "format_size", "format_strikethrough", "format_text_clip", "format_text_overflow", "format_text_wrap", "format_textdirection_l_to_r", "format_textdirection_r_to_l", "format_underlined", "format_underlined_squiggle", "forms_add_on", "forms_apps_script", "fort", "forum", "forward", "forward_10", "forward_30", "forward_5", "forward_circle", "forward_media", "forward_to_inbox", "foundation", "frame_inspect", "frame_person", "frame_person_off", "frame_reload", "frame_source", "free_cancellation", "front_hand", "front_loader", "full_stacked_bar_chart", "fullscreen", "fullscreen_exit", "function", "functions", "g_mobiledata", "g_mobiledata_badge", "g_translate", "gallery_thumbnail", "gamepad", "garage", "garage_home", "garden_cart", "gas_meter", "gastroenterology", "gate", "gavel", "generating_tokens", "genetics", "gesture", "gesture_select", "gif", "gif_box", "girl", "gite", "glass_cup", "globe_asia", "globe_uk", "glucose", "glyphs", "go_to_line", "golf_course", "google_tv_remote", "google_wifi", "gpp_bad", "gpp_maybe", "grade", "gradient", "grading", "grain", "graphic_eq", "grass", "grid_3x3", "grid_3x3_off", "grid_4x4", "grid_goldenratio", "grid_guides", "grid_off", "grid_on", "grid_view", "group", "group_add", "group_off", "group_remove", "group_work", "grouped_bar_chart", "groups", "groups_2", "groups_3", "gynecology", "h_mobiledata", "h_mobiledata_badge", "h_plus_mobiledata", "h_plus_mobiledata_badge", "hail", "hand_bones", "hand_gesture", "handshake", "handyman", "hard_drive", "hard_drive_2", "hardware", "hd", "hdr_auto", "hdr_auto_select", "hdr_enhanced_select", "hdr_off", "hdr_off_select", "hdr_on", "hdr_on_select", "hdr_plus", "hdr_strong", "hdr_weak", "headphones", "headphones_battery", "headset_mic", "headset_off", "healing", "health_and_safety", "health_metrics", "heap_snapshot_large", "heap_snapshot_multiple", "heap_snapshot_thumbnail", "hearing", "hearing_disabled", "heart_broken", "heart_check", "heart_minus", "heart_plus", "heat_pump", "heat_pump_balance", "height", "helicopter", "help", "help_center", "help_clinic", "hematology", "hevc", "hexagon", "hide", "hide_image", "hide_source", "high_density", "high_quality", "highlight", "highlighter_size_1", "highlighter_size_2", "highlighter_size_3", "highlighter_size_4", "highlighter_size_5", "hiking", "history", "history_edu", "history_toggle_off", "hive", "hls", "hls_off", "holiday_village", "home", "home_app_logo", "home_health", "home_iot_device", "home_max", "home_max_dots", "home_mini", "home_pin", "home_repair_service", "home_speaker", "home_storage", "home_work", "horizontal_distribute", "horizontal_rule", "horizontal_split", "hot_tub", "hotel", "hotel_class", "hourglass_bottom", "hourglass_disabled", "hourglass_empty", "hourglass_full", "hourglass_top", "house", "house_siding", "house_with_shield", "houseboat", "how_to_reg", "how_to_vote", "hr_resting", "html", "http", "hub", "humerus", "humerus_alt", "humidity_high", "humidity_low", "humidity_mid", "humidity_percentage", "hvac", "ice_skating", "icecream", "iframe", "iframe_off", "image", "image_aspect_ratio", "image_not_supported", "image_search", "imagesearch_roller", "imagesmode", "immunology", "import_contacts", "important_devices", "in_home_mode", "inactive_order", "inbox", "inbox_customize", "incomplete_circle", "indeterminate_check_box", "info", "infrared", "inpatient", "input", "input_circle", "insert_chart", "insert_page_break", "insert_text", "insights", "install_desktop", "install_mobile", "integration_instructions", "interactive_space", "interests", "interpreter_mode", "inventory", "inventory_2", "invert_colors", "invert_colors_off", "ios_share", "iron", "javascript", "join", "join_full", "join_inner", "join_left", "join_right", "joystick", "jump_to_element", "kayaking", "kebab_dining", "kettle", "key", "key_off", "key_visualizer", "keyboard", "keyboard_alt", "keyboard_arrow_down", "keyboard_arrow_left", "keyboard_arrow_right", "keyboard_arrow_up", "keyboard_backspace", "keyboard_capslock", "keyboard_capslock_badge", "keyboard_command_key", "keyboard_control_key", "keyboard_double_arrow_down", "keyboard_double_arrow_left", "keyboard_double_arrow_right", "keyboard_double_arrow_up", "keyboard_external_input", "keyboard_full", "keyboard_hide", "keyboard_keys", "keyboard_off", "keyboard_onscreen", "keyboard_option_key", "keyboard_previous_language", "keyboard_return", "keyboard_tab", "keyboard_tab_rtl", "keyboard_voice", "king_bed", "kitchen", "kitesurfing", "lab_panel", "lab_profile", "lab_research", "label", "label_important", "label_off", "labs", "lan", "landscape", "landslide", "language", "language_chinese_array", "language_chinese_cangjie", "language_chinese_dayi", "language_chinese_pinyin", "language_chinese_quick", "language_chinese_wubi", "language_french", "language_gb_english", "language_international", "language_korean_latin", "language_pinyin", "language_spanish", "language_us", "language_us_colemak", "language_us_dvorak", "laps", "laptop_chromebook", "laptop_mac", "laptop_windows", "last_page", "laundry", "layers", "layers_clear", "lda", "leaderboard", "leak_add", "leak_remove", "left_click", "left_panel_close", "left_panel_open", "legend_toggle", "lens", "lens_blur", "letter_switch", "library_add", "library_add_check", "library_books", "library_music", "lift_to_talk", "light", "light_group", "light_mode", "lightbulb", "lightbulb_circle", "line_axis", "line_curve", "line_end", "line_end_arrow", "line_end_arrow_notch", "line_end_circle", "line_end_diamond", "line_end_square", "line_start", "line_start_arrow", "line_start_arrow_notch", "line_start_circle", "line_start_diamond", "line_start_square", "line_style", "line_weight", "linear_scale", "link", "link_off", "linked_camera", "liquor", "list", "list_alt", "list_alt_add", "live_help", "live_tv", "living", "local_activity", "local_atm", "local_bar", "local_cafe", "local_car_wash", "local_convenience_store", "local_dining", "local_drink", "local_fire_department", "local_florist", "local_gas_station", "local_hospital", "local_laundry_service", "local_library", "local_mall", "local_parking", "local_pharmacy", "local_pizza", "local_police", "local_post_office", "local_see", "local_shipping", "local_taxi", "location_automation", "location_away", "location_chip", "location_city", "location_disabled", "location_home", "location_off", "location_on", "location_searching", "lock", "lock_clock", "lock_open", "lock_open_right", "lock_person", "lock_reset", "login", "logo_dev", "logout", "looks", "looks_3", "looks_4", "looks_5", "looks_6", "looks_one", "looks_two", "loupe", "low_density", "low_priority", "loyalty", "lte_mobiledata", "lte_mobiledata_badge", "lte_plus_mobiledata", "lte_plus_mobiledata_badge", "luggage", "lunch_dining", "lyrics", "macro_auto", "macro_off", "magic_button", "magic_exchange", "magic_tether", "magnification_large", "magnification_small", "magnify_docked", "magnify_fullscreen", "mail", "mail_lock", "male", "man", "man_2", "man_3", "man_4", "manage_accounts", "manage_history", "manage_search", "manga", "map", "maps_ugc", "margin", "mark_as_unread", "mark_chat_read", "mark_chat_unread", "mark_email_read", "mark_email_unread", "mark_unread_chat_alt", "markunread_mailbox", "masks", "match_case", "match_word", "matter", "maximize", "measuring_tape", "media_bluetooth_off", "media_bluetooth_on", "media_link", "mediation", "medical_information", "medical_mask", "medical_services", "medication", "medication_liquid", "meeting_room", "memory", "memory_alt", "menstrual_health", "menu", "menu_book", "menu_open", "merge", "merge_type", "metabolism", "mfg_nest_yale_lock", "mic", "mic_double", "mic_external_off", "mic_external_on", "mic_off", "microbiology", "microwave", "microwave_gen", "military_tech", "mindfulness", "minimize", "minor_crash", "missed_video_call", "mist", "mixture_med", "mms", "mobile_friendly", "mobile_off", "mobile_screen_share", "mobiledata_off", "mode_comment", "mode_cool", "mode_cool_off", "mode_fan", "mode_fan_off", "mode_heat", "mode_heat_cool", "mode_heat_off", "mode_night", "mode_of_travel", "mode_off_on", "mode_standby", "model_training", "monetization_on", "money", "money_off", "monitor", "monitor_heart", "monitor_weight", "monitor_weight_gain", "monitor_weight_loss", "monitoring", "monochrome_photos", "mood", "mood_bad", "mop", "more", "more_down", "more_horiz", "more_time", "more_up", "more_vert", "mosque", "motion_blur", "motion_mode", "motion_photos_auto", "motion_photos_off", "motion_photos_paused", "motion_sensor_active", "motion_sensor_alert", "motion_sensor_idle", "motion_sensor_urgent", "motorcycle", "mountain_flag", "mouse", "move", "move_down", "move_group", "move_location", "move_selection_down", "move_selection_left", "move_selection_right", "move_selection_up", "move_to_inbox", "move_up", "movie", "movie_edit", "movie_filter", "moving", "moving_beds", "moving_ministry", "mp", "multicooker", "multiline_chart", "multiple_stop", "museum", "music_note", "music_off", "music_video", "my_location", "mystery", "nat", "nature", "nature_people", "navigate_before", "navigate_next", "navigation", "near_me", "near_me_disabled", "nearby_error", "nearby_off", "nephrology", "nest_audio", "nest_cam_floodlight", "nest_cam_indoor", "nest_cam_iq", "nest_cam_iq_outdoor", "nest_cam_magnet_mount", "nest_cam_outdoor", "nest_cam_stand", "nest_cam_wall_mount", "nest_cam_wired_stand", "nest_clock_farsight_analog", "nest_clock_farsight_digital", "nest_connect", "nest_detect", "nest_display", "nest_display_max", "nest_doorbell_visitor", "nest_eco_leaf", "nest_farsight_weather", "nest_found_savings", "nest_heat_link_e", "nest_heat_link_gen_3", "nest_hello_doorbell", "nest_mini", "nest_multi_room", "nest_remote", "nest_remote_comfort_sensor", "nest_secure_alarm", "nest_sunblock", "nest_tag", "nest_thermostat_e_eu", "nest_thermostat_gen_3", "nest_thermostat_sensor", "nest_thermostat_sensor_eu", "nest_thermostat_zirconium_eu", "nest_true_radiant", "nest_wake_on_approach", "nest_wake_on_press", "nest_wifi_gale", "nest_wifi_point", "nest_wifi_router", "network_cell", "network_check", "network_intelligence_history", "network_intelligence_update", "network_locked", "network_manage", "network_ping", "network_wifi", "network_wifi_1_bar", "network_wifi_2_bar", "network_wifi_3_bar", "neurology", "new_label", "new_releases", "new_window", "newspaper", "next_plan", "next_week", "nfc", "night_shelter", "night_sight_auto", "night_sight_auto_off", "night_sight_max", "nightlife", "nightlight", "nightlight_off", "nights_stay", "no_accounts", "no_adult_content", "no_backpack", "no_crash", "no_drinks", "no_encryption", "no_flash", "no_food", "no_luggage", "no_meals", "no_meeting_room", "no_photography", "no_sim", "no_stroller", "no_transfer", "noise_aware", "noise_control_off", "noise_control_on", "nordic_walking", "north", "north_east", "north_west", "not_accessible", "not_listed_location", "not_started", "note", "note_add", "note_alt", "notes", "notification_add", "notification_important", "notifications", "notifications_active", "notifications_off", "notifications_paused", "numbers", "nutrition", "offline_bolt", "offline_pin", "offline_share", "oil_barrel", "on_device_training", "oncology", "online_prediction", "onsen", "opacity", "open_in_browser", "open_in_full", "open_in_new", "open_in_new_down", "open_in_new_off", "open_with", "ophthalmology", "oral_disease", "order_approve", "order_play", "orthopedics", "other_admission", "other_houses", "outbound", "outbox", "outdoor_garden", "outdoor_grill", "outgoing_mail", "outlet", "outpatient", "outpatient_med", "output", "output_circle", "oven_gen", "overview", "overview_key", "oxygen_saturation", "pace", "pacemaker", "package", "padding", "page_info", "pages", "pageview", "paid", "palette", "pallet", "pan_tool", "pan_tool_alt", "pan_zoom", "panorama", "panorama_fish_eye", "panorama_horizontal", "panorama_photosphere", "panorama_vertical", "panorama_wide_angle", "paragliding", "park", "partly_cloudy_day", "partly_cloudy_night", "partner_exchange", "party_mode", "password", "patient_list", "pattern", "pause", "pause_circle", "pause_presentation", "payments", "pedal_bike", "pediatrics", "pen_size_1", "pen_size_2", "pen_size_3", "pen_size_4", "pen_size_5", "pending", "pending_actions", "pentagon", "percent", "pergola", "perm_camera_mic", "perm_contact_calendar", "perm_data_setting", "perm_device_information", "perm_media", "perm_phone_msg", "perm_scan_wifi", "person", "person_2", "person_3", "person_4", "person_add", "person_add_disabled", "person_book", "person_celebrate", "person_off", "person_pin", "person_pin_circle", "person_play", "person_remove", "person_search", "personal_injury", "pest_control", "pest_control_rodent", "pets", "phishing", "phone_android", "phone_bluetooth_speaker", "phone_callback", "phone_disabled", "phone_enabled", "phone_forwarded", "phone_in_talk", "phone_iphone", "phone_locked", "phone_missed", "phone_paused", "phonelink_erase", "phonelink_lock", "phonelink_off", "phonelink_ring", "phonelink_ring_off", "phonelink_setup", "photo", "photo_album", "photo_camera", "photo_camera_back", "photo_camera_front", "photo_filter", "photo_frame", "photo_library", "photo_size_select_large", "photo_size_select_small", "php", "physical_therapy", "piano", "piano_off", "picture_as_pdf", "picture_in_picture", "picture_in_picture_alt", "pie_chart", "pill", "pill_off", "pin", "pin_drop", "pin_end", "pin_invoke", "pinch", "pinch_zoom_in", "pinch_zoom_out", "pip", "pip_exit", "pivot_table_chart", "place_item", "plagiarism", "play_arrow", "play_circle", "play_disabled", "play_for_work", "play_lesson", "play_pause", "play_shapes", "playing_cards", "playlist_add", "playlist_add_check", "playlist_add_check_circle", "playlist_add_circle", "playlist_play", "playlist_remove", "plumbing", "podcasts", "podiatry", "podium", "point_of_sale", "point_scan", "policy", "polyline", "polymer", "pool", "portable_wifi_off", "position_bottom_left", "position_bottom_right", "position_top_right", "post_add", "potted_plant", "power", "power_input", "power_off", "power_rounded", "power_settings_new", "prayer_times", "precision_manufacturing", "pregnancy", "pregnant_woman", "preliminary", "prescriptions", "present_to_all", "preview", "preview_off", "price_change", "price_check", "print", "print_add", "print_connect", "print_disabled", "print_error", "print_lock", "priority", "priority_high", "privacy", "privacy_tip", "private_connectivity", "problem", "procedure", "process_chart", "production_quantity_limits", "productivity", "propane", "propane_tank", "psychiatry", "psychology", "psychology_alt", "public", "public_off", "publish", "published_with_changes", "pulmonology", "punch_clock", "push_pin", "qr_code", "qr_code_2", "qr_code_2_add", "qr_code_scanner", "query_stats", "question_exchange", "question_mark", "queue_music", "queue_play_next", "quick_phrases", "quick_reference", "quick_reference_all", "quickreply", "quiet_time", "quiet_time_active", "quiz", "r_mobiledata", "radar", "radio", "radio_button_checked", "radio_button_unchecked", "radiology", "railway_alert", "rainy", "rainy_heavy", "rainy_light", "rainy_snow", "ramen_dining", "ramp_left", "ramp_right", "range_hood", "rate_review", "raw_off", "raw_on", "read_more", "readiness_score", "real_estate_agent", "rear_camera", "rebase", "rebase_edit", "receipt", "receipt_long", "recent_actors", "recent_patient", "recommend", "record_voice_over", "rectangle", "recycling", "redeem", "redo", "reduce_capacity", "refresh", "regular_expression", "relax", "release_alert", "remember_me", "remote_gen", "remove", "remove_done", "remove_from_queue", "remove_moderator", "remove_road", "remove_shopping_cart", "reopen_window", "reorder", "repartition", "repeat", "repeat_on", "repeat_one", "repeat_one_on", "replay", "replay_10", "replay_30", "replay_5", "reply", "reply_all", "report", "report_off", "request_page", "request_quote", "reset_image", "reset_tv", "resize", "respiratory_rate", "restart_alt", "restaurant", "restaurant_menu", "restore_from_trash", "restore_page", "resume", "reviews", "rheumatology", "rib_cage", "rice_bowl", "right_click", "right_panel_close", "right_panel_open", "ring_volume", "robot", "rocket", "rocket_launch", "roller_shades", "roller_shades_closed", "roller_skating", "roofing", "room_preferences", "room_service", "rotate_90_degrees_ccw", "rotate_90_degrees_cw", "rotate_left", "rotate_right", "roundabout_left", "roundabout_right", "rounded_corner", "route", "router", "routine", "rowing", "rss_feed", "rsvp", "rtt", "rule", "rule_folder", "rule_settings", "run_circle", "running_with_errors", "rv_hookup", "safety_check", "safety_divider", "sailing", "salinity", "sanitizer", "satellite", "satellite_alt", "sauna", "save", "save_as", "saved_search", "savings", "scale", "scan", "scan_delete", "scanner", "scatter_plot", "scene", "schedule", "schedule_send", "schema", "school", "science", "score", "scoreboard", "screen_lock_landscape", "screen_lock_portrait", "screen_lock_rotation", "screen_record", "screen_rotation", "screen_rotation_alt", "screen_rotation_up", "screen_search_desktop", "screen_share", "screenshot", "screenshot_frame", "screenshot_keyboard", "screenshot_monitor", "screenshot_region", "screenshot_tablet", "scuba_diving", "sd", "sd_card", "sd_card_alert", "search", "search_check", "search_off", "security", "security_update_good", "security_update_warning", "segment", "select", "select_all", "select_check_box", "select_to_speak", "self_care", "self_improvement", "sell", "send", "send_and_archive", "send_time_extension", "send_to_mobile", "sensor_door", "sensor_occupied", "sensor_window", "sensors", "sensors_off", "sentiment_calm", "sentiment_content", "sentiment_dissatisfied", "sentiment_excited", "sentiment_extremely_dissatisfied", "sentiment_frustrated", "sentiment_neutral", "sentiment_sad", "sentiment_satisfied", "sentiment_stressed", "sentiment_very_dissatisfied", "sentiment_very_satisfied", "sentiment_worried", "set_meal", "settings", "settings_accessibility", "settings_account_box", "settings_alert", "settings_applications", "settings_b_roll", "settings_backup_restore", "settings_bluetooth", "settings_brightness", "settings_cell", "settings_cinematic_blur", "settings_ethernet", "settings_input_antenna", "settings_input_component", "settings_input_hdmi", "settings_input_svideo", "settings_motion_mode", "settings_night_sight", "settings_overscan", "settings_panorama", "settings_phone", "settings_photo_camera", "settings_power", "settings_remote", "settings_slow_motion", "settings_suggest", "settings_system_daydream", "settings_timelapse", "settings_video_camera", "settings_voice", "settop_component", "severe_cold", "shape_line", "shapes", "share", "share_location", "share_off", "share_reviews", "share_windows", "sheets_rtl", "shelf_auto_hide", "shelf_position", "shelves", "shield", "shield_lock", "shield_moon", "shield_person", "shield_with_heart", "shield_with_house", "shift", "shift_lock", "shop", "shop_two", "shopping_bag", "shopping_basket", "shopping_cart", "shopping_cart_checkout", "short_stay", "short_text", "show_chart", "shower", "shuffle", "shuffle_on", "shutter_speed", "sick", "sign_language", "signal_cellular_0_bar", "signal_cellular_1_bar", "signal_cellular_2_bar", "signal_cellular_3_bar", "signal_cellular_4_bar", "signal_cellular_add", "signal_cellular_alt", "signal_cellular_alt_1_bar", "signal_cellular_alt_2_bar", "signal_cellular_connected_no_internet_0_bar", "signal_cellular_connected_no_internet_4_bar", "signal_cellular_nodata", "signal_cellular_null", "signal_cellular_off", "signal_disconnected", "signal_wifi_0_bar", "signal_wifi_4_bar", "signal_wifi_bad", "signal_wifi_off", "signal_wifi_statusbar_not_connected", "signal_wifi_statusbar_null", "signature", "signpost", "sim_card", "sim_card_download", "single_bed", "sip", "skateboarding", "skeleton", "skip_next", "skip_previous", "skull", "sledding", "sleep", "sleep_score", "slide_library", "slideshow", "slow_motion_video", "smart_button", "smart_display", "smart_outlet", "smart_screen", "smart_toy", "smartphone", "smb_share", "smoke_free", "smoking_rooms", "sms", "sms_failed", "snippet_folder", "snooze", "snowboarding", "snowing", "snowing_heavy", "snowmobile", "snowshoeing", "soap", "social_distance", "social_leaderboard", "solar_power", "sort", "sort_by_alpha", "sos", "sound_detection_dog_barking", "sound_detection_glass_break", "sound_detection_loud_sound", "sound_sampler", "soup_kitchen", "source_notes", "south", "south_america", "south_east", "south_west", "spa", "space_bar", "space_dashboard", "spatial_audio", "spatial_audio_off", "spatial_tracking", "speaker", "speaker_group", "speaker_notes", "speaker_notes_off", "speaker_phone", "special_character", "specific_gravity", "speech_to_text", "speed", "spellcheck", "splitscreen", "splitscreen_bottom", "splitscreen_left", "splitscreen_right", "splitscreen_top", "spo2", "spoke", "sports", "sports_bar", "sports_baseball", "sports_basketball", "sports_cricket", "sports_esports", "sports_football", "sports_golf", "sports_gymnastics", "sports_handball", "sports_hockey", "sports_kabaddi", "sports_martial_arts", "sports_mma", "sports_motorsports", "sports_rugby", "sports_score", "sports_soccer", "sports_tennis", "sports_volleyball", "sprinkler", "sprint", "square", "square_foot", "ssid_chart", "stack", "stack_off", "stack_star", "stacked_bar_chart", "stacked_line_chart", "stadia_controller", "stadium", "stairs", "star", "star_half", "star_rate", "star_rate_half", "stars", "start", "stay_current_landscape", "stay_current_portrait", "stay_primary_landscape", "stay_primary_portrait", "step", "step_into", "step_out", "step_over", "steps", "stethoscope", "stethoscope_arrow", "stethoscope_check", "sticky_note_2", "stop", "stop_circle", "stop_screen_share", "storage", "store", "storefront", "storm", "straight", "straighten", "strategy", "stream", "stream_apps", "streetview", "stress_management", "strikethrough_s", "stroke_full", "stroke_partial", "stroller", "style", "styler", "stylus", "stylus_laser_pointer", "stylus_note", "subdirectory_arrow_left", "subdirectory_arrow_right", "subject", "subscript", "subscriptions", "subtitles", "subtitles_off", "subway", "summarize", "sunny", "sunny_snowing", "superscript", "supervised_user_circle", "supervised_user_circle_off", "supervisor_account", "support", "support_agent", "surfing", "surgical", "surround_sound", "swap_calls", "swap_horiz", "swap_horizontal_circle", "swap_vert", "swap_vertical_circle", "swipe", "swipe_down", "swipe_down_alt", "swipe_left", "swipe_left_alt", "swipe_right", "swipe_right_alt", "swipe_up", "swipe_up_alt", "swipe_vertical", "switch", "switch_access", "switch_access_shortcut", "switch_access_shortcut_add", "switch_account", "switch_camera", "switch_left", "switch_right", "switch_video", "sword_rose", "swords", "symptoms", "synagogue", "sync", "sync_alt", "sync_disabled", "sync_lock", "sync_problem", "sync_saved_locally", "syringe", "system_update", "system_update_alt", "tab", "tab_close", "tab_close_right", "tab_duplicate", "tab_group", "tab_move", "tab_new_right", "tab_recent", "tab_unselected", "table", "table_bar", "table_chart", "table_chart_view", "table_lamp", "table_restaurant", "table_rows", "table_rows_narrow", "table_view", "tablet", "tablet_android", "tablet_mac", "tag", "takeout_dining", "tamper_detection_off", "tamper_detection_on", "tap_and_play", "tapas", "task", "task_alt", "taunt", "taxi_alert", "team_dashboard", "temp_preferences_custom", "temp_preferences_eco", "temple_buddhist", "temple_hindu", "tenancy", "terminal", "text_decrease", "text_fields", "text_format", "text_increase", "text_rotate_up", "text_rotate_vertical", "text_rotation_angledown", "text_rotation_angleup", "text_rotation_down", "text_rotation_none", "text_select_end", "text_select_jump_to_beginning", "text_select_jump_to_end", "text_select_move_back_character", "text_select_move_back_word", "text_select_move_down", "text_select_move_forward_character", "text_select_move_forward_word", "text_select_move_up", "text_select_start", "text_snippet", "text_to_speech", "texture", "theater_comedy", "theaters", "thermometer", "thermometer_gain", "thermometer_loss", "thermostat", "thermostat_auto", "thermostat_carbon", "thumb_down", "thumb_up", "thumbnail_bar", "thumbs_up_down", "thunderstorm", "tibia", "tibia_alt", "time_auto", "timelapse", "timeline", "timer", "timer_10", "timer_10_alt_1", "timer_10_select", "timer_3", "timer_3_alt_1", "timer_3_select", "timer_off", "tips_and_updates", "tire_repair", "title", "toc", "today", "toggle_off", "toggle_on", "token", "toll", "tonality", "tools_flat_head", "tools_installation_kit", "tools_ladder", "tools_level", "tools_phillips", "tools_pliers_wire_stripper", "tools_power_drill", "top_panel_close", "top_panel_open", "topic", "tornado", "total_dissolved_solids", "touch_app", "touchpad_mouse", "tour", "toys", "toys_fan", "track_changes", "traffic", "trail_length", "trail_length_medium", "trail_length_short", "train", "tram", "transcribe", "transfer_within_a_station", "transform", "transgender", "transit_enterexit", "translate", "transportation", "travel_explore", "trending_down", "trending_flat", "trending_up", "trip_origin", "trolley", "tsunami", "tty", "tune", "turn_left", "turn_right", "turn_sharp_left", "turn_sharp_right", "turn_slight_left", "turn_slight_right", "tv", "tv_gen", "tv_off", "tv_remote", "tv_with_assistant", "two_wheeler", "type_specimen", "u_turn_left", "u_turn_right", "ulna_radius", "ulna_radius_alt", "umbrella", "unarchive", "undo", "unfold_less", "unfold_less_double", "unfold_more", "unfold_more_double", "ungroup", "unknown_document", "unknown_med", "unpublished", "unsubscribe", "upcoming", "update", "update_disabled", "upgrade", "upload", "upload_file", "urology", "usb", "usb_off", "vaccines", "valve", "vape_free", "vaping_rooms", "variables", "ventilator", "verified", "verified_user", "vertical_align_bottom", "vertical_align_center", "vertical_align_top", "vertical_distribute", "vertical_shades", "vertical_shades_closed", "vertical_split", "vibration", "video_call", "video_camera_back", "video_camera_front", "video_camera_front_off", "video_chat", "video_file", "video_label", "video_library", "video_settings", "video_stable", "videocam", "videocam_off", "videogame_asset", "videogame_asset_off", "view_agenda", "view_array", "view_carousel", "view_column", "view_column_2", "view_comfy", "view_comfy_alt", "view_compact", "view_compact_alt", "view_cozy", "view_day", "view_headline", "view_in_ar", "view_in_ar_off", "view_kanban", "view_list", "view_module", "view_quilt", "view_sidebar", "view_stream", "view_timeline", "view_week", "vignette", "villa", "visibility", "visibility_lock", "visibility_off", "vital_signs", "voice_chat", "voice_over_off", "voicemail", "volcano", "volume_down", "volume_down_alt", "volume_mute", "volume_off", "volume_up", "volunteer_activism", "voting_chip", "vpn_key", "vpn_key_alert", "vpn_key_off", "vpn_lock", "vrpano", "wall_lamp", "wallet", "wallpaper", "wallpaper_slideshow", "ward", "warehouse", "warning", "warning_off", "wash", "watch", "watch_button_press", "watch_off", "watch_screentime", "watch_wake", "water", "water_bottle", "water_bottle_large", "water_damage", "water_do", "water_drop", "water_ec", "water_full", "water_heater", "water_lock", "water_loss", "water_lux", "water_medium", "water_orp", "water_ph", "water_pump", "water_voc", "waterfall_chart", "waves", "waving_hand", "wb_auto", "wb_incandescent", "wb_iridescent", "wb_shade", "wb_sunny", "wb_twilight", "wc", "weather_hail", "weather_mix", "weather_snowy", "web", "web_asset", "web_asset_off", "web_stories", "webhook", "weekend", "weight", "west", "whatshot", "wheelchair_pickup", "where_to_vote", "widgets", "width", "width_full", "width_normal", "width_wide", "wifi", "wifi_1_bar", "wifi_2_bar", "wifi_add", "wifi_calling", "wifi_calling_1", "wifi_calling_2", "wifi_calling_3", "wifi_channel", "wifi_find", "wifi_home", "wifi_lock", "wifi_notification", "wifi_off", "wifi_password", "wifi_protected_setup", "wifi_proxy", "wifi_tethering", "wifi_tethering_error", "wifi_tethering_off", "wind_power", "window", "window_closed", "window_open", "window_sensor", "wine_bar", "woman", "woman_2", "work", "work_alert", "work_history", "work_update", "workspace_premium", "workspaces", "wounds_injuries", "wrap_text", "wrist", "wrong_location", "wysiwyg", "yard", "youtube_activity", "youtube_searched_for", "zone_person_alert", "zone_person_idle", "zone_person_urgent", "zoom_in", "zoom_in_map", "zoom_out", "zoom_out_map"];
+
+var Icon = function Icon(_ref) {
+  var active = _ref.active,
+    icon = _ref.icon,
+    _onClick = _ref.onClick,
+    symbolsStyle = _ref.symbolsStyle,
+    style = _ref.style;
+  return /*#__PURE__*/jsx(Tooltip, {
+    content: humanize(icon),
+    position: "bottom",
+    touch: ["hold", 500],
+    children: /*#__PURE__*/jsx("div", {
+      style: style,
+      "data-testid": "icon-picker-icon-".concat(icon),
+      className: classnames("neeto-ui-rounded-md flex cursor-pointer items-center justify-center", {
+        "neeto-ui-text-gray-700 hover:neeto-ui-bg-gray-100": !active,
+        "neeto-ui-text-white neeto-ui-bg-primary-500": active
+      }),
+      onClick: function onClick() {
+        return _onClick(icon);
+      },
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex w-11/12 flex-col justify-center p-1",
+        style: symbolsStyle,
+        children: [/*#__PURE__*/jsx("span", {
+          className: "material-symbols-rounded mx-auto",
+          children: icon
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "line-clamp-2 text-center",
+          style: "body3",
+          children: humanize(icon)
+        })]
+      })
+    })
+  });
+};
+
+var css = "@import url(\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,300,0..1,0\");";
+n(css,{});
+
+var NoResults = withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/jsx(Typography, {
+    className: "neeto-ui-text-gray-400 flex h-64 items-center justify-center text-lg",
+    "data-cy": "no-icon-results-found-text",
+    children: t("neetoMolecules.iconPicker.dropdown.noResults")
+  });
+});
+var NoResults$1 = /*#__PURE__*/memo(NoResults);
+
+var _excluded = ["filled", "label", "value", "onClick", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var IconPicker = function IconPicker(_ref) {
+  var _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled,
+    label = _ref.label,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    iconList = _useState4[0],
+    setIconList = _useState4[1];
+  var _useState5 = useState(value),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeIcon = _useState6[0],
+    setActiveIcon = _useState6[1];
+  var gridRef = useRef(null);
+  var debouncedSearchTerm = useDebounce(searchTerm);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var isLargerScreen = function isLargerScreen() {
+    return window.innerWidth > 768;
+  };
+  var handleSearch = function handleSearch(term) {
+    var _gridRef$current;
+    var searchTerm = term.toLowerCase().trim().replace(/\s+/g, "_");
+    var filteredIcons = ICONS_LIST.filter(function (icon) {
+      return icon.toLowerCase().includes(searchTerm);
+    });
+    setIconList(filteredIcons);
+    (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 || _gridRef$current.scrollToItem({
+      rowIndex: 0
+    });
+  };
+  var handleRemoveClick = function handleRemoveClick() {
+    onClick("");
+    setActiveIcon("");
+  };
+  var handleDropdownClick = function handleDropdownClick() {
+    var _gridRef$current2;
+    (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 || _gridRef$current2.scrollToItem({
+      rowIndex: iconList.findIndex(function (icon) {
+        return icon === activeIcon;
+      }) / GRID_PROPERTIES.columnCount
+    });
+    setSearchTerm("");
+  };
+  var symbolsStyle = {
+    fontVariationSettings: "'FILL' ".concat(filled ? 1 : 0)
+  };
+  useEffect(function () {
+    handleSearch(debouncedSearchTerm);
+  }, [debouncedSearchTerm]);
+  var renderGridCell = function renderGridCell(_ref2) {
+    var columnIndex = _ref2.columnIndex,
+      rowIndex = _ref2.rowIndex,
+      style = _ref2.style,
+      data = _ref2.data;
+    var iconIndex = rowIndex * GRID_PROPERTIES.columnCount + columnIndex;
+    var icon = data[iconIndex];
+    var handleIconClick = function handleIconClick(icon) {
+      onClick(icon);
+      setActiveIcon(icon);
+    };
+    return icon ? /*#__PURE__*/jsx(Icon, {
+      icon: icon,
+      style: style,
+      symbolsStyle: symbolsStyle,
+      active: icon === activeIcon,
+      onClick: handleIconClick
+    }) : null;
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col items-start gap-2",
+    children: [label && /*#__PURE__*/jsx(Label, {
+      children: label
+    }), /*#__PURE__*/jsx(Dropdown, _objectSpread(_objectSpread({
+      buttonSize: "small",
+      buttonStyle: "secondary",
+      closeOnSelect: false,
+      dropdownProps: {
+        className: classnames("h-96", className)
+      },
+      position: "bottom-start",
+      strategy: "fixed",
+      buttonProps: {
+        "data-testid": "icon-picker-dropdown",
+        onClick: handleDropdownClick
+      },
+      label: /*#__PURE__*/jsxs("span", {
+        className: "flex items-center gap-2",
+        style: symbolsStyle,
+        children: [value && /*#__PURE__*/jsx("span", {
+          className: "material-symbols-rounded neeto-ui-text-base mx-auto",
+          children: value
+        }), /*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: humanize(value) || t("neetoMolecules.iconPicker.dropdown.label")
+        })]
+      }),
+      onClose: function onClose() {
+        return setSearchTerm("");
+      }
+    }, otherProps), {}, {
+      children: /*#__PURE__*/jsxs("div", {
+        className: "w-72 flex-grow p-2 md:w-80",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "mb-1 space-y-2",
+          children: [/*#__PURE__*/jsx(Input, {
+            autoFocus: true,
+            autoComplete: "off",
+            "data-cy": "pick-icon-text-field",
+            value: searchTerm,
+            placeholder: t("neetoMolecules.common.search", {
+              entity: t("neetoMolecules.iconPicker.entity")
+            }),
+            suffix: /*#__PURE__*/jsx(Button, {
+              icon: Close,
+              size: "small",
+              style: "link",
+              onClick: function onClick() {
+                return setSearchTerm("");
+              }
+            }),
+            onChange: function onChange(e) {
+              return setSearchTerm(e.target.value);
+            }
+          }), value && /*#__PURE__*/jsx("div", {
+            className: "neeto-ui-bg-white flex justify-center",
+            children: /*#__PURE__*/jsx(Button, {
+              className: "text-sm",
+              "data-cy": "icon-remove-button",
+              "data-testid": "icon-remove-button",
+              icon: Close,
+              label: t("neetoMolecules.iconPicker.dropdown.removeButton"),
+              style: "link",
+              onClick: handleRemoveClick
+            })
+          })]
+        }), isNotEmpty(iconList) ? /*#__PURE__*/jsx(FixedSizeGrid, {
+          className: "w-full overflow-x-hidden",
+          columnCount: GRID_PROPERTIES.columnCount,
+          height: GRID_PROPERTIES.gridHeight,
+          itemData: iconList,
+          ref: gridRef,
+          rowHeight: GRID_PROPERTIES.rowHeight,
+          width: GRID_PROPERTIES.gridWidth,
+          columnWidth: isLargerScreen() ? GRID_PROPERTIES.columnWidthDesktop : GRID_PROPERTIES.columnWidthMobile,
+          rowCount: Math.ceil(iconList.length / GRID_PROPERTIES.columnCount),
+          children: renderGridCell
+        }) : /*#__PURE__*/jsx(NoResults$1, {})]
+      })
+    }))]
+  });
+};
+
+export { IconPicker as default };
+//# sourceMappingURL=IconPicker.js.map