@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.5

package/lib/recipes/Slider.stories.js

@@ -8,20 +8,16 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-
 /* eslint-disable no-nested-ternary */
 import React from 'react';
 import { mergeProps, useFocusRing, useSlider, useSliderThumb, VisuallyHidden } from 'react-aria';
 import { useSliderState } from 'react-stately';
 import { useNumberFormatter } from '@react-aria/i18n';
-import { Box } from '../index';
 import { defaultFocus } from '../components/Button/Buttons.styles';
+import { Box } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Slider'
@@ -74,12 +70,11 @@ var sx = {
     boxShadow: '0 2px 2px 0 #CACACA'
   }
 };
-
 var setSliderColor = function setSliderColor(thumbPosition) {
   var _context, _context2, _context3, _context4;
-
   return thumbPosition < 25 ? _concatInstanceProperty(_context = "linear-gradient(to right, rgb(169, 215, 50) 0%, rgb(169, 215, 50) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 25 && thumbPosition <= 49 ? _concatInstanceProperty(_context2 = "linear-gradient(to right, rgb(226, 215, 20) 0%, rgb(226, 215, 20) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context2, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 50 && thumbPosition <= 74 ? _concatInstanceProperty(_context3 = "linear-gradient(to right,  rgb(231, 135, 38) 0%,  rgb(231, 135, 38) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context3, thumbPosition, "%, rgb(242, 242, 242) 100%)") : _concatInstanceProperty(_context4 = "linear-gradient(to right, rgb(235, 44, 56) 0%, rgb(235, 44, 56) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context4, thumbPosition, "%, rgb(242, 242, 242) 100%)");
 };
+
 /*
  * The slider value can be formatted by using the `formatOptions` prop.
 `* formatOptions` is compatible with the option parameter of
@@ -88,7 +83,6 @@ var setSliderColor = function setSliderColor(thumbPosition) {
  * https://react-spectrum.adobe.com/react-aria/useSlider.html
  */
 
-
 export var Default = function Default() {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     mb: "xl"
@@ -103,20 +97,17 @@ export var Default = function Default() {
     step: 1
   })));
 };
-
 var Slider = function Slider(props) {
   var trackRef = React.useRef(null);
   var numberFormatter = useNumberFormatter(props.formatOptions);
   var state = useSliderState(_objectSpread(_objectSpread({}, props), {}, {
     numberFormatter: numberFormatter
   }));
-
   var _useSlider = useSlider(props, state, trackRef),
-      groupProps = _useSlider.groupProps,
-      trackProps = _useSlider.trackProps,
-      labelProps = _useSlider.labelProps,
-      outputProps = _useSlider.outputProps;
-
+    groupProps = _useSlider.groupProps,
+    trackProps = _useSlider.trackProps,
+    labelProps = _useSlider.labelProps,
+    outputProps = _useSlider.outputProps;
   var thumbPosition = state.getThumbPercent(0) * 100;
   return ___EmotionJSX(Box, _extends({}, groupProps, {
     sx: sx.sliderContainer
@@ -137,22 +128,18 @@ var Slider = function Slider(props) {
     trackRef: trackRef
   })));
 };
-
 var RangeSlider = function RangeSlider(props) {
   var _context5;
-
   var trackRef = React.useRef(null);
   var numberFormatter = useNumberFormatter(props.formatOptions);
   var state = useSliderState(_objectSpread(_objectSpread({}, props), {}, {
     numberFormatter: numberFormatter
   }));
-
   var _useSlider2 = useSlider(props, state, trackRef),
-      groupProps = _useSlider2.groupProps,
-      trackProps = _useSlider2.trackProps,
-      labelProps = _useSlider2.labelProps,
-      outputProps = _useSlider2.outputProps;
-
+    groupProps = _useSlider2.groupProps,
+    trackProps = _useSlider2.trackProps,
+    labelProps = _useSlider2.labelProps,
+    outputProps = _useSlider2.outputProps;
   return ___EmotionJSX(Box, _extends({}, groupProps, {
     sx: sx.sliderContainer
   }), ___EmotionJSX(Box, {
@@ -174,25 +161,21 @@ var RangeSlider = function RangeSlider(props) {
     trackRef: trackRef
   })));
 };
-
 var Thumb = function Thumb(props) {
   var state = props.state,
-      trackRef = props.trackRef,
-      index = props.index;
+    trackRef = props.trackRef,
+    index = props.index;
   var inputRef = React.useRef(null);
-
   var _useSliderThumb = useSliderThumb({
-    index: index,
-    trackRef: trackRef,
-    inputRef: inputRef
-  }, state),
-      thumbProps = _useSliderThumb.thumbProps,
-      inputProps = _useSliderThumb.inputProps;
-
+      index: index,
+      trackRef: trackRef,
+      inputRef: inputRef
+    }, state),
+    thumbProps = _useSliderThumb.thumbProps,
+    inputProps = _useSliderThumb.inputProps;
   var _useFocusRing = useFocusRing(),
-      focusProps = _useFocusRing.focusProps,
-      isFocusVisible = _useFocusRing.isFocusVisible;
-
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
   return ___EmotionJSX(Box, {
     sx: _objectSpread(_objectSpread({}, sx.thumbContainer), {}, {
       left: "".concat(state.getThumbPercent(index) * 100, "%")

package/lib/recipes/TrialExperienceIndustryButtons.stories.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
 import CloseIcon from 'mdi-react/CloseIcon';
-import { Box, Button, HelpHint, Icon, IconButton, Modal, OverlayProvider, Text } from '../index';
 import useModalState from '../hooks/useModalState';
+import { Box, Button, HelpHint, Icon, IconButton, Modal, OverlayProvider, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Trial Experience Buttons'
@@ -85,7 +85,6 @@ var sx = {
     maxWidth: '357px'
   }
 };
-
 var retailSVG = function retailSVG(props) {
   return ___EmotionJSX("svg", _extends({
     width: "250",
@@ -120,7 +119,6 @@ var retailSVG = function retailSVG(props) {
     fill: "#051727"
   }));
 };
-
 var airlineSVG = function airlineSVG(props) {
   return ___EmotionJSX("svg", _extends({
     width: "251",
@@ -174,7 +172,6 @@ var airlineSVG = function airlineSVG(props) {
     transform: "translate(0.90625 0.282715)"
   }))));
 };
-
 var educationSVG = function educationSVG(props) {
   return ___EmotionJSX("svg", _extends({
     width: "251",
@@ -228,7 +225,6 @@ var educationSVG = function educationSVG(props) {
     transform: "translate(0.330078 0.282715)"
   }))));
 };
-
 var financialSVG = function financialSVG(props) {
   return ___EmotionJSX("svg", _extends({
     width: "250",
@@ -286,7 +282,6 @@ var financialSVG = function financialSVG(props) {
     fill: "white"
   }))));
 };
-
 var governmentSVG = function governmentSVG(props) {
   return ___EmotionJSX("svg", _extends({
     width: "251",
@@ -335,7 +330,6 @@ var governmentSVG = function governmentSVG(props) {
     transform: "translate(0.602051)"
   }))));
 };
-
 var healthcareSVG = function healthcareSVG(props) {
   return ___EmotionJSX("svg", _extends({
     width: "250",
@@ -385,7 +379,6 @@ var healthcareSVG = function healthcareSVG(props) {
     fill: "#051727"
   }));
 };
-
 var hotelSVG = function hotelSVG(props) {
   return ___EmotionJSX("svg", _extends({
     width: "58",
@@ -438,7 +431,6 @@ var hotelSVG = function hotelSVG(props) {
     fill: "white"
   }))));
 };
-
 var manufacturingSVG = function manufacturingSVG(props) {
   return ___EmotionJSX("svg", _extends({
     width: "250",
@@ -484,7 +476,6 @@ var manufacturingSVG = function manufacturingSVG(props) {
     fill: "#B3282D"
   }));
 };
-
 var pharmancySVG = function pharmancySVG(props) {
   return ___EmotionJSX("svg", _extends({
     width: "250",
@@ -537,7 +528,6 @@ var pharmancySVG = function pharmancySVG(props) {
     fill: "#B3282D"
   }));
 };
-
 var realtySVG = function realtySVG(props) {
   return ___EmotionJSX("svg", _extends({
     width: "250",
@@ -612,7 +602,6 @@ var realtySVG = function realtySVG(props) {
     transform: "translate(0 0.180664)"
   }))));
 };
-
 var buttons = [{
   name: 'Retail',
   icon: retailSVG

package/lib/recipes/TrialExperienceStatusBar.stories.js

@@ -6,12 +6,11 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useState } from 'react';
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
-import { IconButton, Link, Box, Icon, Text, Separator } from '../index';
+import { Box, Icon, IconButton, Link, Separator, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Trial Experience Nav'
 };
-
 var ArtIcon = function ArtIcon() {
   return ___EmotionJSX("svg", {
     width: "24",
@@ -23,7 +22,6 @@ var ArtIcon = function ArtIcon() {
     fill: "#4660A2"
   }));
 };
-
 var EarthMagnifyGlassIcon = function EarthMagnifyGlassIcon() {
   return ___EmotionJSX("svg", {
     width: "25",
@@ -35,7 +33,6 @@ var EarthMagnifyGlassIcon = function EarthMagnifyGlassIcon() {
     fill: "#4660A2"
   }));
 };
-
 var EarthCircleIcon = function EarthCircleIcon() {
   return ___EmotionJSX("svg", {
     width: "25",
@@ -48,7 +45,6 @@ var EarthCircleIcon = function EarthCircleIcon() {
     fill: "#4660A2"
   }));
 };
-
 var RadioButtonIcon = function RadioButtonIcon(props) {
   return ___EmotionJSX("svg", _extends({
     "data-name": "Layer 1",
@@ -67,7 +63,6 @@ var RadioButtonIcon = function RadioButtonIcon(props) {
     fill: "white"
   }));
 };
-
 var data = [{
   title: 'Design a Solution',
   icon: ArtIcon,
@@ -177,36 +172,28 @@ var sx = {
     boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
   }
 };
-
 var Stage = function Stage(props) {
   var title = props.title,
-      icon = props.icon,
-      links = props.links,
-      isLastStage = props.isLastStage;
-
+    icon = props.icon,
+    links = props.links,
+    isLastStage = props.isLastStage;
   var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedLinks = _useState2[0],
-      updateSelectedLinks = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedLinks = _useState2[0],
+    updateSelectedLinks = _useState2[1];
   var onSelectionChange = function onSelectionChange(thisIndex) {
     var _context2;
-
     var newArray = [];
-
     if (_includesInstanceProperty(selectedLinks).call(selectedLinks, thisIndex)) {
       newArray = _filterInstanceProperty(selectedLinks).call(selectedLinks, function (link) {
         return link !== thisIndex;
       });
     } else {
       var _context;
-
       newArray = _concatInstanceProperty(_context = []).call(_context, selectedLinks, [thisIndex]);
     }
-
     updateSelectedLinks(_concatInstanceProperty(_context2 = []).call(_context2, newArray));
   };
-
   return ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
@@ -238,24 +225,20 @@ var Stage = function Stage(props) {
     }));
   }))));
 };
-
 var LinkRow = function LinkRow(props) {
   var title = props.title,
-      index = props.index,
-      onSelectionChange = props.onSelectionChange,
-      isLinkSelected = props.isLinkSelected,
-      isLastLink = props.isLastLink;
-
+    index = props.index,
+    onSelectionChange = props.onSelectionChange,
+    isLinkSelected = props.isLinkSelected,
+    isLastLink = props.isLastLink;
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isSelected = _useState4[0],
-      handleSelectionChange = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isSelected = _useState4[0],
+    handleSelectionChange = _useState4[1];
   var onIconPress = function onIconPress() {
     handleSelectionChange(!isSelected);
     onSelectionChange(index);
   };
-
   return ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
@@ -280,7 +263,6 @@ var LinkRow = function LinkRow(props) {
     sx: sx.linkRowText
   }, title)));
 };
-
 export var Default = function Default() {
   // Open the `Story` addons tab to view the source code for full context.
   return ___EmotionJSX(Box, {

package/lib/styles/ColorDocumentation.js

@@ -8,27 +8,24 @@ import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import { Item } from 'react-stately';
+import PropTypes from 'prop-types';
 import Box from '../components/Box';
+import SelectField from '../components/SelectField';
 import Text from '../components/Text';
 import TextField from '../components/TextField';
 import { flatColorList } from './colors.js';
-import SelectField from '../components/SelectField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var exactMatchThreshold = 0.02;
-
 function Color(_ref) {
   var name = _ref.name,
-      hex = _ref.hex,
-      distanceFromReference = _ref.distanceFromReference,
-      referenceColor = _ref.referenceColor;
-
+    hex = _ref.hex,
+    distanceFromReference = _ref.distanceFromReference,
+    referenceColor = _ref.referenceColor;
   if (distanceFromReference < 0 || distanceFromReference > 1) {
     // eslint-disable-next-line no-console
     console.log("Please check color distance logic. Value ".concat(distanceFromReference, " is outside range [0, 1]"));
   }
-
   return ___EmotionJSX(Box, {
     key: name,
     isRow: true,
@@ -65,11 +62,10 @@ function Color(_ref) {
     color: "active"
   }, "Exact match(>", 100 - _Math$trunc(exactMatchThreshold * 100), "%)!"), distanceFromReference > exactMatchThreshold && ___EmotionJSX(Text, {
     variant: "subtitle"
-  }, "matchLevel: ", 100 - _Math$trunc(distanceFromReference * 100), "%"), ___EmotionJSX(Text, {
+  }, "matchLevel:", ' ', 100 - _Math$trunc(distanceFromReference * 100), "%"), ___EmotionJSX(Text, {
     variant: "bodyWeak"
   }, hex)));
 }
-
 Color.propTypes = {
   name: PropTypes.string.isRequired,
   hex: PropTypes.string.isRequired,
@@ -78,16 +74,14 @@ Color.propTypes = {
 };
 var Colors = /*#__PURE__*/React.memo(function (_ref2) {
   var _context, _context2;
-
   var distanceFromReferenceCb = _ref2.distanceFromReferenceCb,
-      referenceColor = _ref2.referenceColor;
+    referenceColor = _ref2.referenceColor;
   return ___EmotionJSX(Box, {
     gap: 20
   }, _mapInstanceProperty(_context = _sortInstanceProperty(_context2 = _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref3) {
     var _ref4 = _slicedToArray(_ref3, 2),
-        name = _ref4[0],
-        hex = _ref4[1];
-
+      name = _ref4[0],
+      hex = _ref4[1];
     return {
       name: name,
       hex: hex,
@@ -99,8 +93,8 @@ var Colors = /*#__PURE__*/React.memo(function (_ref2) {
     return distance1 - distance2;
   })).call(_context, function (_ref7) {
     var name = _ref7.name,
-        hex = _ref7.hex,
-        distance = _ref7.distance;
+      hex = _ref7.hex,
+      distance = _ref7.distance;
     return ___EmotionJSX(Color, {
       hex: hex,
       name: name,
@@ -114,44 +108,38 @@ Colors.propTypes = {
   distanceFromReferenceCb: PropTypes.func.isRequired,
   referenceColor: PropTypes.string.isRequired
 };
-
 function hexToRgb(input) {
   var _context8;
-
   var hex = input;
-
   if (!hex.match(/^#/)) {
     hex = "#".concat(hex);
   }
-
   if (hex.length === 4) {
     var _context3, _context4, _context5, _context6, _context7;
-
     hex = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = "#".concat(hex[1])).call(_context7, hex[1])).call(_context6, hex[2])).call(_context5, hex[2])).call(_context4, hex[3])).call(_context3, hex[3]);
   }
-
   return _mapInstanceProperty(_context8 = [_sliceInstanceProperty(hex).call(hex, 1, 3), _sliceInstanceProperty(hex).call(hex, 3, 5), _sliceInstanceProperty(hex).call(hex, 5, 7)]).call(_context8, function (x) {
     return _parseInt(x, 16);
   });
 }
-
 function rgbToHsl(rgb) {
   var _rgb = _slicedToArray(rgb, 3),
-      r = _rgb[0],
-      g = _rgb[1],
-      b = _rgb[2];
-
+    r = _rgb[0],
+    g = _rgb[1],
+    b = _rgb[2];
   r /= 255;
   g /= 255;
-  b /= 255; // Find greatest and smallest channel values
+  b /= 255;
 
+  // Find greatest and smallest channel values
   var cmin = Math.min(r, g, b);
   var cmax = Math.max(r, g, b);
   var delta = cmax - cmin;
   var h;
   var s;
-  var l; // Calculate hue
+  var l;
 
+  // Calculate hue
   if (delta === 0) {
     // No difference
     h = 0;
@@ -167,43 +155,47 @@ function rgbToHsl(rgb) {
     // eslint-disable-next-line no-mixed-operators
     h = (r - g) / delta + 4;
   }
+  h = Math.round(h * 60);
 
-  h = Math.round(h * 60); // Make negative hues positive behind 360°
-
+  // Make negative hues positive behind 360°
   if (h < 0) {
     h += 360;
-  } // Calculate lightness
+  }
 
+  // Calculate lightness
+  l = (cmax + cmin) / 2;
 
-  l = (cmax + cmin) / 2; // Calculate saturation
+  // Calculate saturation
   // eslint-disable-next-line no-mixed-operators
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
 
-  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); // Multiply l and s by 100
-
+  // Multiply l and s by 100
   s = +(s * 100).toFixed(1);
   l = +(l * 100).toFixed(1);
   return [h, s, l];
 }
-
 var matchers = {
   'RGB Average Diff': function RGBAverageDiff(referenceValue) {
     return function (entry) {
       var rgb1 = hexToRgb(entry);
-      var rgb2 = hexToRgb(referenceValue); // eslint-disable-next-line no-mixed-operators
-
-      return (Math.abs(rgb1[0] - rgb2[0]) + // eslint-disable-next-line no-mixed-operators
-      Math.abs(rgb1[1] - rgb2[1]) + // eslint-disable-next-line no-mixed-operators
-      Math.abs(rgb1[2] - rgb2[2])) / (3 * 256);
+      var rgb2 = hexToRgb(referenceValue);
+      // eslint-disable-next-line no-mixed-operators
+      return (Math.abs(rgb1[0] - rgb2[0])
+      // eslint-disable-next-line no-mixed-operators
+      + Math.abs(rgb1[1] - rgb2[1])
+      // eslint-disable-next-line no-mixed-operators
+      + Math.abs(rgb1[2] - rgb2[2])) / (3 * 256);
     };
   },
   'RGB distance': function RGBDistance(referenceValue) {
     return function (entry) {
       var rgb1 = hexToRgb(entry);
-      var rgb2 = hexToRgb(referenceValue); // eslint-disable-next-line no-mixed-operators
-
-      return Math.sqrt(Math.pow(rgb1[0] - rgb2[0], 2) + // eslint-disable-next-line no-mixed-operators
-      Math.pow(rgb1[1] - rgb2[1], 2) + // eslint-disable-next-line no-mixed-operators
-      Math.pow(rgb1[2] - rgb2[2], 2)) / (3 * 256);
+      var rgb2 = hexToRgb(referenceValue);
+      // eslint-disable-next-line no-mixed-operators
+      return Math.sqrt(Math.pow(rgb1[0] - rgb2[0], 2) // eslint-disable-next-line no-mixed-operators
+      + Math.pow(rgb1[1] - rgb2[1], 2)
+      // eslint-disable-next-line no-mixed-operators
+      + Math.pow(rgb1[2] - rgb2[2], 2)) / (3 * 256);
     };
   },
   'By Hue Difference': function ByHueDifference(referenceValue) {
@@ -215,36 +207,30 @@ var matchers = {
       since hue is circle-like value from 0 to 359 degree
       we want to ensure 2 values of 1 and 359 would be treated as close
       */
-
       return Math.min(distance, 360 - distance) / 180;
     };
   }
 };
 export function ColorSchema() {
   var _context9;
-
   var _useState = useState('#FFFFFF'),
-      _useState2 = _slicedToArray(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
   var _useState3 = useState(_Object$keys(matchers)[0]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      matcher = _useState4[0],
-      setMatcher = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    matcher = _useState4[0],
+    setMatcher = _useState4[1];
   var _useState5 = useState('#FFFFFF'),
-      _useState6 = _slicedToArray(_useState5, 2),
-      referenceColor = _useState6[0],
-      setReferenceColor = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    referenceColor = _useState6[0],
+    setReferenceColor = _useState6[1];
   var filterCallback = React.useCallback(matchers[matcher](referenceColor), [referenceColor, matcher]);
   useEffect(function () {
     var timerId = _setTimeout(function () {
       // let's debounce, re-rendering color list is heavy due to sorting
       setReferenceColor(inputValue);
     }, 300);
-
     return function () {
       clearTimeout(timerId);
     };