@corva/ui 0.65.0-0 → 0.65.0-1-test

package/components/GradientPicker/GradientPicker.js

@@ -1 +1,365 @@
-import{__assign as t,__spreadArray as o}from'./../../ext-esm/tslib/tslib.es6.js';import{jsxs as e,jsx as n}from"react/jsx-runtime";import{useRef as r,useState as i,useEffect as a,useMemo as l}from"react";import{withSize as c}from"react-sizeme";import s from"classnames";import u from"react-cursor-position";import d from"react-draggable";import{find as m,noop as p,get as f,sortBy as v,reject as h,clamp as g,omit as b}from"lodash";import y from"tinygradient";import{v4 as C}from"uuid";import{Typography as N,Tooltip as k,Popover as x,IconButton as P,TextField as _}from"@material-ui/core";import{Add as j}from"@material-ui/icons";import z from"@material-ui/icons/Delete";import I from"../ColorPicker/PaletteChromePicker/PaletteChromePicker.js";import{calcGradientStyle as F,getStopText as O,roundToStep as S,getRangeStep as T}from"./GradientPicker.utils.js";import{useThrottledCallback as B}from"../shared/useThrottledCallback.js";import{useStyles as D}from"./GradientPicker.styles.js";var G=c()((function(c){var G=c.size,V=c.from,w=void 0===V?0:V,E=c.to,A=void 0===E?100:E,H=c.unit,K=c.gradientStops,M=c.onChange,R=c.style,W=c.isMoveInputVisible,q=c.readonly,J=c.noScale,L=c["data-testid"],Q=void 0===L?"GradientPicker":L,U=r(),X=i([]),Y=X[0],Z=X[1],$=i(null),tt=$[0],ot=$[1],et=i(null),nt=et[0],rt=et[1],it=i(null),at=it[0],lt=it[1],ct=D({readonly:q}),st=Number.isFinite(w)?Number(w):0,ut=Number.isFinite(A)?Number(A):100,dt=ut-st;a((function(){(K.length!==(null==Y?void 0:Y.length)||K.some((function(t,o){return t.color!==Y[o].color||t.pos!==Y[o].pos})))&&Z(K.map((function(o){return t(t({},o),{id:C()})})))}),[K]);var mt=l((function(){return F(Y)}),[Y]),pt=l((function(){var t;return null===(t=U.current)||void 0===t?void 0:t.clientWidth}),[G.width,U.current]),ft=function(t){var o=v(t,"pos");Z(o),M&&M(o.map((function(t){return b(t,"id")})))},vt=B((function(e,n,r,i){if(void 0===i&&(i=!1),!tt){var a=n/pt*100,l=m(Y,{id:e});if(r>=40||r<=-50)gt();else{var c=t(t({},l),{pos:a}),s=v(o(o([],h(Y,{id:e}),!0),[c],!1),"pos");if(i)return ft(s),void rt(null);Z(s),yt||rt(e)}}}),0),ht=function(){ft(Y),rt(null),ot(null)},gt=function(){Y.length>2&&(ft(h(Y,{id:nt})),ot(null),rt(null))},bt=!tt&&Number.isFinite(at)&&!q,yt=m(Y,{id:nt}),Ct=T(dt),Nt=function(t){if(!t)return null;var o=st+(null==t?void 0:t.pos)/100*dt;return S(o,Ct/100)}(yt);return e("div",t({className:ct.root,style:R},{children:[!J&&e("div",t({className:ct.indicatorContainer},{children:[n("div",{children:e(N,t({"data-testid":"".concat(Q,"_from"),className:ct.indicator},{children:[st," ",H]}))}),n("div",{children:e(N,t({"data-testid":"".concat(Q,"_to"),className:ct.indicator},{children:[ut," ",H]}))})]})),n(u,t({onPositionChanged:function(t){lt(f(t,"isPositionOutside",!0)?null:f(t,"position.x",null))}},{children:e("div",t({"data-testid":"".concat(Q,"_track"),className:ct.mainBar,style:{background:"linear-gradient(90deg, ".concat(mt,")")},ref:U},{children:[bt&&n("div",t({"data-testid":"".concat(Q,"_addCircle"),className:ct.addCircle,style:{left:at-12},onClick:function(){var t=at/pt*100,e=y(Y.map((function(t){return{color:t.color,pos:t.pos/100}}))),n="#".concat(e.rgbAt(t/100).toHex()),r={id:C(),pos:t,color:n};ft(o(o([],Y,!0),[r],!1))}},{children:n(j,{fontSize:"small",className:ct.addIcon})})),pt&&Y.map((function(o,e){var r,i=o.pos,a=o.color,l=o.id;return n(d,t({disabled:q,axis:"x",bounds:{left:-12,right:pt-12,top:-50,bottom:40},onDrag:function(t,o){return vt(l,o.x+12,o.y,!1)},onStop:function(t,o){return vt(l,o.x+12,o.y,!0)},position:{x:pt*i/100-12,y:-4}},{children:n("div",t({onClick:function(t){return function(t,o){q||nt||(rt(o),ot(t.currentTarget))}(t,l)},"data-testid":"".concat(Q,"_stop_").concat(e),className:s(ct.circle,{highlight:nt===l}),style:{backgroundColor:a}},{children:n(k,t({title:(r=i,O(r,{fromValue:st,toValue:ut})),placement:"top"},{children:n("div",{style:{height:"100%"}})}))}))}),l)}))]}))})),Boolean(tt)&&e(x,t({id:"colors-popper",open:Boolean(tt),anchorEl:tt,onClose:ht,anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"}},{children:[n(I,{color:null==yt?void 0:yt.color,onChange:function(o){var e=o.hex;Z(Y.map((function(o){return o.id===nt?t(t({},o),{color:e}):o})))},onSizeChange:p,enableTransparencyPalette:!1}),n(P,t({"data-testid":"".concat(Q,"_stopDelete"),className:ct.removeButton,onClick:gt},{children:n(z,{className:ct.deleteIcon})})),W&&n(_,{"data-testid":"".concat(Q,"_moveInput"),type:"number",variant:"outlined",value:Nt,classes:{root:ct.posTextfield},InputProps:{inputProps:{min:st,max:ut,step:Ct,maxlength:10},classes:{root:ct.posOutlinedRoot,input:ct.posOutlinedInput}},autoFocus:!0,onFocus:function(t){return t.target.select()},onChange:function(o){if(""===o.target.value){var e=o.target;setTimeout((function(){return null==e?void 0:e.select()}))}var n=g(Number(o.target.value),st,ut);n||o.target.select();var r=(n-st)/dt*100;Z(Y.map((function(o){return o.id===nt?t(t({},o),{pos:r}):o})))},onKeyDown:function(t){return"Enter"===t.key&&ht()}})]}))]}))}));export{G as GradientPicker};
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef, useState, useEffect, useMemo } from 'react';
+import { withSize } from 'react-sizeme';
+import classNames from 'classnames';
+import ReactCursorPosition from 'react-cursor-position';
+import Draggable from 'react-draggable';
+import { find, noop, get, sortBy, reject, clamp, omit } from 'lodash';
+import tinygradient from 'tinygradient';
+import { v4 } from 'uuid';
+import { Typography, Tooltip, Popover, IconButton, TextField } from '@material-ui/core';
+import { Add } from '@material-ui/icons';
+import DeleteIcon from '@material-ui/icons/Delete';
+import PaletteChromePicker from '../ColorPicker/PaletteChromePicker/PaletteChromePicker.js';
+import { calcGradientStyle, getStopText, roundToStep, getRangeStep } from './GradientPicker.utils.js';
+import { useThrottledCallback } from '../shared/useThrottledCallback.js';
+import { useStyles } from './GradientPicker.styles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var DRAG_TOP_LIMIT = -50;
+var DRAG_BOTTOM_LIMIT = 40;
+var DRAG_OFFSET_X = 12;
+var DRAG_OFFSET_Y = -4;
+var GradientPickerComponent = function GradientPickerComponent(_ref) {
+  var size = _ref.size,
+    _ref$from = _ref.from,
+    from = _ref$from === void 0 ? 0 : _ref$from,
+    _ref$to = _ref.to,
+    to = _ref$to === void 0 ? 100 : _ref$to,
+    unit = _ref.unit,
+    gradientStops = _ref.gradientStops,
+    onChange = _ref.onChange,
+    style = _ref.style,
+    isMoveInputVisible = _ref.isMoveInputVisible,
+    readonly = _ref.readonly,
+    noScale = _ref.noScale,
+    _ref$dataTestid = _ref['data-testid'],
+    PAGE_NAME = _ref$dataTestid === void 0 ? 'GradientPicker' : _ref$dataTestid;
+  var trackRef = useRef();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    stops = _useState2[0],
+    setStops = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    paletteAnchorEl = _useState4[0],
+    setPaletteAnchorEl = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeStopId = _useState6[0],
+    setActiveStopId = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    addCirclePos = _useState8[0],
+    setAddCirclePos = _useState8[1];
+  var classes = useStyles({
+    readonly: readonly
+  });
+  var fromValue = Number.isFinite(from) ? Number(from) : 0;
+  var toValue = Number.isFinite(to) ? Number(to) : 100;
+  var range = toValue - fromValue;
+  useEffect(function () {
+    var changed = gradientStops.length !== (stops === null || stops === void 0 ? void 0 : stops.length) || gradientStops.some(function (stop, index) {
+      return stop.color !== stops[index].color || stop.pos !== stops[index].pos;
+    });
+    if (changed) {
+      setStops(gradientStops.map(function (stop) {
+        return _objectSpread(_objectSpread({}, stop), {}, {
+          id: v4()
+        });
+      }));
+    }
+  }, [gradientStops]);
+  var gradient = useMemo(function () {
+    return calcGradientStyle(stops);
+  }, [stops]);
+  var containerWidth = useMemo(function () {
+    var _trackRef$current;
+    return (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.clientWidth;
+  }, [size.width, trackRef.current]);
+  var emitChange = function emitChange(stops) {
+    var sorted = sortBy(stops, 'pos');
+    setStops(sorted);
+    if (onChange) {
+      onChange(sorted.map(function (stop) {
+        return omit(stop, 'id');
+      }));
+    }
+  };
+  var onPositionChanged = function onPositionChanged(cursorInfo) {
+    setAddCirclePos(get(cursorInfo, 'isPositionOutside', true) ? null : get(cursorInfo, 'position.x', null));
+  };
+
+  /**
+   * When a user clicks a stop the "startDrag" and "click" events are fired simultaneously.
+   * So useThrottledCallback (or any other scheduler, like setTimeout) solves
+   * this conflict by waiting a tick and allowing the palette to open.
+   * Then if it was a click and palette is open - do not initiate drag-n-drop.
+   */
+  var handleDragMove = useThrottledCallback(function (id, xPos, yPos) {
+    var isStopped = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    if (paletteAnchorEl) {
+      return;
+    }
+    var pos = xPos / containerWidth * 100;
+    var stop = find(stops, {
+      id: id
+    });
+    if (yPos >= DRAG_BOTTOM_LIMIT || yPos <= DRAG_TOP_LIMIT) {
+      handleRemoveStop();
+      return;
+    }
+    var currentStop = _objectSpread(_objectSpread({}, stop), {}, {
+      pos: pos
+    });
+    var newStops = sortBy([].concat(_toConsumableArray(reject(stops, {
+      id: id
+    })), [currentStop]), 'pos');
+    if (isStopped) {
+      emitChange(newStops);
+      setActiveStopId(null);
+      return;
+    }
+    setStops(newStops);
+    if (!activeStop) {
+      setActiveStopId(id);
+    }
+  }, 0);
+  var handleAdd = function handleAdd() {
+    var pos = addCirclePos / containerWidth * 100;
+    var gradient = tinygradient(stops.map(function (item) {
+      return {
+        color: item.color,
+        pos: item.pos / 100
+      };
+    }));
+    var color = "#".concat(gradient.rgbAt(pos / 100).toHex());
+    var newStop = {
+      id: v4(),
+      pos: pos,
+      color: color
+    };
+    emitChange([].concat(_toConsumableArray(stops), [newStop]));
+  };
+  var handleColorPickerOpen = function handleColorPickerOpen(e, id) {
+    if (readonly || activeStopId) {
+      return;
+    }
+    setActiveStopId(id);
+    setPaletteAnchorEl(e.currentTarget);
+  };
+  var handleColorPickerClose = function handleColorPickerClose() {
+    emitChange(stops);
+    setActiveStopId(null);
+    setPaletteAnchorEl(null);
+  };
+  var handleStopPositionTextInput = function handleStopPositionTextInput(evt) {
+    // give React a moment to update state and draw input with a zero and select the zero
+    // to allow user type a new value
+    if (evt.target.value === '') {
+      var inputElement = evt.target;
+      setTimeout(function () {
+        return inputElement === null || inputElement === void 0 ? void 0 : inputElement.select();
+      });
+    }
+    var posScaled = clamp(Number(evt.target.value), fromValue, toValue);
+    if (!posScaled) {
+      evt.target.select();
+    }
+    var pos = (posScaled - fromValue) / range * 100;
+    setStops(stops.map(function (stop) {
+      return stop.id === activeStopId ? _objectSpread(_objectSpread({}, stop), {}, {
+        pos: pos
+      }) : stop;
+    }));
+  };
+  var handleColorChange = function handleColorChange(newColor) {
+    var color = newColor.hex;
+    setStops(stops.map(function (stop) {
+      return stop.id === activeStopId ? _objectSpread(_objectSpread({}, stop), {}, {
+        color: color
+      }) : stop;
+    }));
+  };
+  var handleRemoveStop = function handleRemoveStop() {
+    if (stops.length > 2) {
+      emitChange(reject(stops, {
+        id: activeStopId
+      }));
+      setPaletteAnchorEl(null);
+      setActiveStopId(null);
+    }
+  };
+  var getStopTooltipValue = function getStopTooltipValue(position) {
+    return getStopText(position, {
+      fromValue: fromValue,
+      toValue: toValue
+    });
+  };
+  var addCircleVisible = !paletteAnchorEl && Number.isFinite(addCirclePos) && !readonly;
+  var getStopScaledPosition = function getStopScaledPosition(activeStop) {
+    if (!activeStop) {
+      return null;
+    }
+    var stopValue = fromValue + (activeStop === null || activeStop === void 0 ? void 0 : activeStop.pos) / 100 * range;
+    return roundToStep(stopValue, stopStep / 100);
+  };
+  var activeStop = find(stops, {
+    id: activeStopId
+  });
+  var stopStep = getRangeStep(range);
+  var activeStopScaledPos = getStopScaledPosition(activeStop);
+  return /*#__PURE__*/jsxs("div", {
+    className: classes.root,
+    style: style,
+    children: [!noScale && /*#__PURE__*/jsxs("div", {
+      className: classes.indicatorContainer,
+      children: [/*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsxs(Typography, {
+          "data-testid": "".concat(PAGE_NAME, "_from"),
+          className: classes.indicator,
+          children: [fromValue, " ", unit]
+        })
+      }), /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsxs(Typography, {
+          "data-testid": "".concat(PAGE_NAME, "_to"),
+          className: classes.indicator,
+          children: [toValue, " ", unit]
+        })
+      })]
+    }), /*#__PURE__*/jsx(ReactCursorPosition, {
+      onPositionChanged: onPositionChanged,
+      children: /*#__PURE__*/jsxs("div", {
+        "data-testid": "".concat(PAGE_NAME, "_track"),
+        className: classes.mainBar,
+        style: {
+          background: "linear-gradient(90deg, ".concat(gradient, ")")
+        },
+        ref: trackRef,
+        children: [addCircleVisible && /*#__PURE__*/jsx("div", {
+          "data-testid": "".concat(PAGE_NAME, "_addCircle"),
+          className: classes.addCircle,
+          style: {
+            left: addCirclePos - DRAG_OFFSET_X
+          },
+          onClick: handleAdd,
+          children: /*#__PURE__*/jsx(Add, {
+            fontSize: "small",
+            className: classes.addIcon
+          })
+        }), containerWidth && stops.map(function (_ref2, index) {
+          var pos = _ref2.pos,
+            color = _ref2.color,
+            id = _ref2.id;
+          return (
+            /*#__PURE__*/
+            // @ts-ignore Draggable propTypes issues
+            jsx(Draggable, {
+              disabled: readonly,
+              axis: "x",
+              bounds: {
+                left: -DRAG_OFFSET_X,
+                right: containerWidth - DRAG_OFFSET_X,
+                top: DRAG_TOP_LIMIT,
+                bottom: DRAG_BOTTOM_LIMIT
+              },
+              onDrag: function onDrag(e, dragData) {
+                return handleDragMove(id, dragData.x + DRAG_OFFSET_X, dragData.y, false);
+              },
+              onStop: function onStop(e, dragData) {
+                return handleDragMove(id, dragData.x + DRAG_OFFSET_X, dragData.y, true);
+              },
+              position: {
+                x: containerWidth * pos / 100 - DRAG_OFFSET_X,
+                y: DRAG_OFFSET_Y
+              },
+              children: /*#__PURE__*/jsx("div", {
+                onClick: function onClick(e) {
+                  return handleColorPickerOpen(e, id);
+                },
+                "data-testid": "".concat(PAGE_NAME, "_stop_").concat(index),
+                className: classNames(classes.circle, {
+                  highlight: activeStopId === id
+                }),
+                style: {
+                  backgroundColor: color
+                },
+                children: /*#__PURE__*/jsx(Tooltip, {
+                  title: getStopTooltipValue(pos),
+                  placement: "top",
+                  children: /*#__PURE__*/jsx("div", {
+                    style: {
+                      height: '100%'
+                    }
+                  })
+                })
+              })
+            }, id)
+          );
+        })]
+      })
+    }), Boolean(paletteAnchorEl) && /*#__PURE__*/jsxs(Popover, {
+      id: "colors-popper",
+      open: Boolean(paletteAnchorEl),
+      anchorEl: paletteAnchorEl,
+      onClose: handleColorPickerClose,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      children: [/*#__PURE__*/jsx(PaletteChromePicker, {
+        color: activeStop === null || activeStop === void 0 ? void 0 : activeStop.color,
+        onChange: handleColorChange,
+        onSizeChange: noop,
+        enableTransparencyPalette: false
+      }), /*#__PURE__*/jsx(IconButton, {
+        "data-testid": "".concat(PAGE_NAME, "_stopDelete"),
+        className: classes.removeButton,
+        onClick: handleRemoveStop,
+        children: /*#__PURE__*/jsx(DeleteIcon, {
+          className: classes.deleteIcon
+        })
+      }), isMoveInputVisible && /*#__PURE__*/jsx(TextField, {
+        "data-testid": "".concat(PAGE_NAME, "_moveInput"),
+        type: "number",
+        variant: "outlined",
+        value: activeStopScaledPos,
+        classes: {
+          root: classes.posTextfield
+        },
+        InputProps: {
+          inputProps: {
+            min: fromValue,
+            max: toValue,
+            step: stopStep,
+            maxlength: 10
+          },
+          classes: {
+            root: classes.posOutlinedRoot,
+            input: classes.posOutlinedInput
+          }
+        },
+        autoFocus: true,
+        onFocus: function onFocus(evt) {
+          return evt.target.select();
+        },
+        onChange: handleStopPositionTextInput,
+        onKeyDown: function onKeyDown(evt) {
+          return evt.key === 'Enter' && handleColorPickerClose();
+        }
+      })]
+    })]
+  });
+};
+var GradientPicker = withSize()(GradientPickerComponent);
+
+export { GradientPicker };
+//# sourceMappingURL=GradientPicker.js.map

package/components/GradientPicker/GradientPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientPicker.js","sources":["../../../src/components/GradientPicker/GradientPicker.tsx"],"sourcesContent":["import { useRef, useEffect, useState, useMemo } from 'react';\nimport { withSize } from 'react-sizeme';\nimport classNames from 'classnames';\nimport ReactCursorPosition from 'react-cursor-position';\nimport Draggable from 'react-draggable';\nimport { get, sortBy, noop, clamp, find, omit, reject } from 'lodash';\nimport tinygradient from 'tinygradient';\nimport { v4 as uuidv4 } from 'uuid';\nimport { Typography, Popover, IconButton, Tooltip, TextField } from '@material-ui/core';\nimport { Add } from '@material-ui/icons';\nimport DeleteIcon from '@material-ui/icons/Delete';\n\nimport { GradientFillStop } from '~/types';\nimport PaletteChromePicker from '../ColorPicker/PaletteChromePicker';\nimport { calcGradientStyle, getRangeStep, getStopText, roundToStep } from './GradientPicker.utils';\nimport { GradientPickerComponentProps } from './GradientPickerProps';\nimport { useThrottledCallback } from '../shared/useThrottledCallback';\nimport { useStyles } from './GradientPicker.styles';\n\nconst DRAG_TOP_LIMIT = -50;\nconst DRAG_BOTTOM_LIMIT = 40;\nconst DRAG_OFFSET_X = 12;\nconst DRAG_OFFSET_Y = -4;\n\nconst GradientPickerComponent: React.FC<GradientPickerComponentProps> = ({\n  size,\n  from = 0,\n  to = 100,\n  unit,\n  gradientStops,\n  onChange,\n  style,\n  isMoveInputVisible,\n  readonly,\n  noScale,\n  'data-testid': PAGE_NAME = 'GradientPicker',\n}) => {\n  const trackRef: React.MutableRefObject<HTMLDivElement> = useRef();\n\n  const [stops, setStops] = useState<Array<GradientFillStop & { id: string }>>([]);\n\n  const [paletteAnchorEl, setPaletteAnchorEl] = useState(null);\n  const [activeStopId, setActiveStopId] = useState(null);\n  const [addCirclePos, setAddCirclePos] = useState(null);\n\n  const classes = useStyles({ readonly });\n\n  const fromValue = Number.isFinite(from) ? Number(from) : 0;\n  const toValue = Number.isFinite(to) ? Number(to) : 100;\n  const range = toValue - fromValue;\n\n  useEffect(() => {\n    const changed =\n      gradientStops.length !== stops?.length ||\n      gradientStops.some(\n        (stop, index) => stop.color !== stops[index].color || stop.pos !== stops[index].pos\n      );\n\n    if (changed) {\n      setStops(gradientStops.map(stop => ({ ...stop, id: uuidv4() })));\n    }\n  }, [gradientStops]);\n\n  const gradient = useMemo(() => calcGradientStyle(stops), [stops]);\n  const containerWidth = useMemo(\n    () => trackRef.current?.clientWidth,\n    [size.width, trackRef.current]\n  );\n\n  const emitChange = (stops: Array<GradientFillStop & { id: string }>) => {\n    const sorted = sortBy(stops, 'pos');\n    setStops(sorted);\n    if (onChange) {\n      onChange(sorted.map(stop => omit(stop, 'id')));\n    }\n  };\n\n  const onPositionChanged = cursorInfo => {\n    setAddCirclePos(\n      get(cursorInfo, 'isPositionOutside', true) ? null : get(cursorInfo, 'position.x', null)\n    );\n  };\n\n  /**\n   * When a user clicks a stop the \"startDrag\" and \"click\" events are fired simultaneously.\n   * So useThrottledCallback (or any other scheduler, like setTimeout) solves\n   * this conflict by waiting a tick and allowing the palette to open.\n   * Then if it was a click and palette is open - do not initiate drag-n-drop.\n   */\n  const handleDragMove = useThrottledCallback(\n    (id: string, xPos: number, yPos: number, isStopped = false) => {\n      if (paletteAnchorEl) {\n        return;\n      }\n      const pos = (xPos / containerWidth) * 100;\n      const stop = find(stops, { id });\n      if (yPos >= DRAG_BOTTOM_LIMIT || yPos <= DRAG_TOP_LIMIT) {\n        handleRemoveStop();\n        return;\n      }\n\n      const currentStop = { ...stop, pos };\n\n      const newStops = sortBy([...reject(stops, { id }), currentStop], 'pos');\n\n      if (isStopped) {\n        emitChange(newStops);\n        setActiveStopId(null);\n        return;\n      }\n\n      setStops(newStops);\n      if (!activeStop) {\n        setActiveStopId(id);\n      }\n    },\n    0\n  );\n\n  const handleAdd = () => {\n    const pos = (addCirclePos / containerWidth) * 100;\n    const gradient = tinygradient(\n      stops.map(item => ({\n        color: item.color,\n        pos: item.pos / 100,\n      }))\n    );\n\n    const color = `#${gradient.rgbAt(pos / 100).toHex()}`;\n    const newStop = { id: uuidv4(), pos, color };\n    emitChange([...stops, newStop]);\n  };\n\n  const handleColorPickerOpen = (e: React.MouseEvent, id) => {\n    if (readonly || activeStopId) {\n      return;\n    }\n    setActiveStopId(id);\n    setPaletteAnchorEl(e.currentTarget);\n  };\n\n  const handleColorPickerClose = () => {\n    emitChange(stops);\n    setActiveStopId(null);\n    setPaletteAnchorEl(null);\n  };\n\n  const handleStopPositionTextInput = (evt: React.ChangeEvent<HTMLInputElement>) => {\n    // give React a moment to update state and draw input with a zero and select the zero\n    // to allow user type a new value\n    if (evt.target.value === '') {\n      const inputElement = evt.target;\n      setTimeout(() => inputElement?.select());\n    }\n    const posScaled = clamp(Number(evt.target.value), fromValue, toValue);\n    if (!posScaled) {\n      evt.target.select();\n    }\n    const pos = ((posScaled - fromValue) / range) * 100;\n    setStops(stops.map(stop => (stop.id === activeStopId ? { ...stop, pos } : stop)));\n  };\n\n  const handleColorChange = newColor => {\n    const color = newColor.hex;\n    setStops(stops.map(stop => (stop.id === activeStopId ? { ...stop, color } : stop)));\n  };\n\n  const handleRemoveStop = () => {\n    if (stops.length > 2) {\n      emitChange(reject(stops, { id: activeStopId }));\n      setPaletteAnchorEl(null);\n      setActiveStopId(null);\n    }\n  };\n\n  const getStopTooltipValue = (position: number) => {\n    return getStopText(position, { fromValue, toValue });\n  };\n\n  const addCircleVisible = !paletteAnchorEl && Number.isFinite(addCirclePos) && !readonly;\n\n  const getStopScaledPosition = activeStop => {\n    if (!activeStop) {\n      return null;\n    }\n    const stopValue = fromValue + (activeStop?.pos / 100) * range;\n    return roundToStep(stopValue, stopStep / 100);\n  };\n\n  const activeStop = find(stops, { id: activeStopId });\n  const stopStep = getRangeStep(range);\n\n  const activeStopScaledPos = getStopScaledPosition(activeStop);\n\n  return (\n    <div className={classes.root} style={style}>\n      {!noScale && (\n        <div className={classes.indicatorContainer}>\n          <div>\n            <Typography data-testid={`${PAGE_NAME}_from`} className={classes.indicator}>\n              {fromValue} {unit}\n            </Typography>\n          </div>\n          <div>\n            <Typography data-testid={`${PAGE_NAME}_to`} className={classes.indicator}>\n              {toValue} {unit}\n            </Typography>\n          </div>\n        </div>\n      )}\n\n      <ReactCursorPosition onPositionChanged={onPositionChanged}>\n        <div\n          data-testid={`${PAGE_NAME}_track`}\n          className={classes.mainBar}\n          style={{ background: `linear-gradient(90deg, ${gradient})` }}\n          ref={trackRef}\n        >\n          {addCircleVisible && (\n            <div\n              data-testid={`${PAGE_NAME}_addCircle`}\n              className={classes.addCircle}\n              style={{ left: addCirclePos - DRAG_OFFSET_X }}\n              onClick={handleAdd}\n            >\n              <Add fontSize=\"small\" className={classes.addIcon} />\n            </div>\n          )}\n\n          {containerWidth &&\n            stops.map(({ pos, color, id }, index) => (\n              // @ts-ignore Draggable propTypes issues\n              <Draggable\n                disabled={readonly}\n                key={id}\n                axis=\"x\"\n                bounds={{\n                  left: -DRAG_OFFSET_X,\n                  right: containerWidth - DRAG_OFFSET_X,\n                  top: DRAG_TOP_LIMIT,\n                  bottom: DRAG_BOTTOM_LIMIT,\n                }}\n                onDrag={(e, dragData) =>\n                  handleDragMove(id, dragData.x + DRAG_OFFSET_X, dragData.y, false)\n                }\n                onStop={(e, dragData) =>\n                  handleDragMove(id, dragData.x + DRAG_OFFSET_X, dragData.y, true)\n                }\n                position={{\n                  x: (containerWidth * pos) / 100 - DRAG_OFFSET_X,\n                  y: DRAG_OFFSET_Y,\n                }}\n              >\n                <div\n                  onClick={e => handleColorPickerOpen(e, id)}\n                  data-testid={`${PAGE_NAME}_stop_${index}`}\n                  className={classNames(classes.circle, {\n                    highlight: activeStopId === id,\n                  })}\n                  style={{ backgroundColor: color }}\n                >\n                  <Tooltip title={getStopTooltipValue(pos)} placement=\"top\">\n                    <div style={{ height: '100%' }} />\n                  </Tooltip>\n                </div>\n              </Draggable>\n            ))}\n        </div>\n      </ReactCursorPosition>\n\n      {Boolean(paletteAnchorEl) && (\n        <Popover\n          id=\"colors-popper\"\n          open={Boolean(paletteAnchorEl)}\n          anchorEl={paletteAnchorEl}\n          onClose={handleColorPickerClose}\n          anchorOrigin={{\n            vertical: 'bottom',\n            horizontal: 'left',\n          }}\n          transformOrigin={{\n            vertical: 'top',\n            horizontal: 'left',\n          }}\n        >\n          <PaletteChromePicker\n            color={activeStop?.color}\n            onChange={handleColorChange}\n            onSizeChange={noop}\n            enableTransparencyPalette={false}\n          />\n          <IconButton\n            data-testid={`${PAGE_NAME}_stopDelete`}\n            className={classes.removeButton}\n            onClick={handleRemoveStop}\n          >\n            <DeleteIcon className={classes.deleteIcon} />\n          </IconButton>\n          {isMoveInputVisible && (\n            <TextField\n              data-testid={`${PAGE_NAME}_moveInput`}\n              type=\"number\"\n              variant=\"outlined\"\n              value={activeStopScaledPos}\n              classes={{ root: classes.posTextfield }}\n              InputProps={{\n                inputProps: {\n                  min: fromValue,\n                  max: toValue,\n                  step: stopStep,\n                  maxlength: 10,\n                },\n                classes: {\n                  root: classes.posOutlinedRoot,\n                  input: classes.posOutlinedInput,\n                },\n              }}\n              autoFocus\n              onFocus={evt => evt.target.select()}\n              onChange={handleStopPositionTextInput}\n              onKeyDown={evt => evt.key === 'Enter' && handleColorPickerClose()}\n            />\n          )}\n        </Popover>\n      )}\n    </div>\n  );\n};\n\nexport const GradientPicker = withSize()(GradientPickerComponent);\n"],"names":["DRAG_TOP_LIMIT","DRAG_BOTTOM_LIMIT","DRAG_OFFSET_X","DRAG_OFFSET_Y","GradientPickerComponent","size","from","to","unit","gradientStops","onChange","style","isMoveInputVisible","readonly","noScale","PAGE_NAME","trackRef","useRef","useState","stops","setStops","paletteAnchorEl","setPaletteAnchorEl","activeStopId","setActiveStopId","addCirclePos","setAddCirclePos","classes","useStyles","fromValue","Number","isFinite","toValue","range","useEffect","changed","length","some","stop","index","color","pos","map","id","uuidv4","gradient","useMemo","calcGradientStyle","containerWidth","current","clientWidth","width","emitChange","sorted","sortBy","omit","onPositionChanged","cursorInfo","get","handleDragMove","useThrottledCallback","xPos","yPos","isStopped","find","handleRemoveStop","currentStop","newStops","reject","activeStop","handleAdd","tinygradient","item","rgbAt","toHex","newStop","handleColorPickerOpen","e","currentTarget","handleColorPickerClose","handleStopPositionTextInput","evt","target","value","inputElement","setTimeout","select","posScaled","clamp","handleColorChange","newColor","hex","getStopTooltipValue","position","getStopText","addCircleVisible","getStopScaledPosition","stopValue","roundToStep","stopStep","getRangeStep","activeStopScaledPos","_jsxs","root","indicatorContainer","_jsx","indicator","mainBar","background","addCircle","left","addIcon","right","top","bottom","dragData","x","y","classNames","circle","highlight","backgroundColor","height","Boolean","vertical","horizontal","noop","removeButton","deleteIcon","posTextfield","inputProps","min","max","step","maxlength","posOutlinedRoot","input","posOutlinedInput","key","GradientPicker","withSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAMA,cAAc,GAAG,CAAC,EAAE,CAAA;AAC1B,IAAMC,iBAAiB,GAAG,EAAE,CAAA;AAC5B,IAAMC,aAAa,GAAG,EAAE,CAAA;AACxB,IAAMC,aAAa,GAAG,CAAC,CAAC,CAAA;AAExB,IAAMC,uBAA+D,GAAG,SAAlEA,uBAA+D,CAY/D,IAAA,EAAA;EAAA,IAXJC,IAAI,QAAJA,IAAI;AAAA,IAAA,SAAA,GAAA,IAAA,CACJC,IAAI;AAAJA,IAAAA,IAAI,0BAAG,CAAC,GAAA,SAAA;AAAA,IAAA,OAAA,GAAA,IAAA,CACRC,EAAE;AAAFA,IAAAA,EAAE,wBAAG,GAAG,GAAA,OAAA;AACRC,IAAAA,IAAI,QAAJA,IAAI;AACJC,IAAAA,aAAa,QAAbA,aAAa;AACbC,IAAAA,QAAQ,QAARA,QAAQ;AACRC,IAAAA,KAAK,QAALA,KAAK;AACLC,IAAAA,kBAAkB,QAAlBA,kBAAkB;AAClBC,IAAAA,QAAQ,QAARA,QAAQ;AACRC,IAAAA,OAAO,QAAPA,OAAO;AAAA,IAAA,eAAA,GAAA,IAAA,CACP,aAAa,CAAA;AAAEC,IAAAA,SAAS,gCAAG,gBAAgB,GAAA,eAAA,CAAA;EAE3C,IAAMC,QAAgD,GAAGC,MAAM,EAAE,CAAA;EAEjE,IAA0BC,SAAAA,GAAAA,QAAQ,CAA2C,EAAE,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,SAAA,EAAA,CAAA,CAAA;IAAzEC,KAAK,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEC,QAAQ,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;EAEtB,IAA8CF,UAAAA,GAAAA,QAAQ,CAAC,IAAI,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,UAAA,EAAA,CAAA,CAAA;IAArDG,eAAe,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEC,kBAAkB,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;EAC1C,IAAwCJ,UAAAA,GAAAA,QAAQ,CAAC,IAAI,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,UAAA,EAAA,CAAA,CAAA;IAA/CK,YAAY,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEC,eAAe,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;EACpC,IAAwCN,UAAAA,GAAAA,QAAQ,CAAC,IAAI,CAAC;AAAA,IAAA,UAAA,GAAA,cAAA,CAAA,UAAA,EAAA,CAAA,CAAA;IAA/CO,YAAY,GAAA,UAAA,CAAA,CAAA,CAAA;IAAEC,eAAe,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;EAEpC,IAAMC,OAAO,GAAGC,SAAS,CAAC;AAAEf,IAAAA,QAAQ,EAARA,QAAAA;AAAS,GAAC,CAAC,CAAA;AAEvC,EAAA,IAAMgB,SAAS,GAAGC,MAAM,CAACC,QAAQ,CAACzB,IAAI,CAAC,GAAGwB,MAAM,CAACxB,IAAI,CAAC,GAAG,CAAC,CAAA;AAC1D,EAAA,IAAM0B,OAAO,GAAGF,MAAM,CAACC,QAAQ,CAACxB,EAAE,CAAC,GAAGuB,MAAM,CAACvB,EAAE,CAAC,GAAG,GAAG,CAAA;AACtD,EAAA,IAAM0B,KAAK,GAAGD,OAAO,GAAGH,SAAS,CAAA;AAEjCK,EAAAA,SAAS,CAAC,YAAM;IACd,IAAMC,OAAO,GACX1B,aAAa,CAAC2B,MAAM,MAAKjB,KAAK,aAALA,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAALA,KAAK,CAAEiB,MAAM,KACtC3B,aAAa,CAAC4B,IAAI,CAChB,UAACC,IAAI,EAAEC,KAAK,EAAA;MAAA,OAAKD,IAAI,CAACE,KAAK,KAAKrB,KAAK,CAACoB,KAAK,CAAC,CAACC,KAAK,IAAIF,IAAI,CAACG,GAAG,KAAKtB,KAAK,CAACoB,KAAK,CAAC,CAACE,GAAG,CAAA;KACpF,CAAA,CAAA;AAEH,IAAA,IAAIN,OAAO,EAAE;AACXf,MAAAA,QAAQ,CAACX,aAAa,CAACiC,GAAG,CAAC,UAAAJ,IAAI,EAAA;AAAA,QAAA,OAAA,aAAA,CAAA,aAAA,CAAA,EAAA,EAAUA,IAAI,CAAA,EAAA,EAAA,EAAA;AAAEK,UAAAA,EAAE,EAAEC,EAAM,EAAA;AAAE,SAAA,CAAA,CAAA;AAAA,OAAG,CAAC,CAAC,CAAA;AAClE,KAAA;AACF,GAAC,EAAE,CAACnC,aAAa,CAAC,CAAC,CAAA;EAEnB,IAAMoC,QAAQ,GAAGC,OAAO,CAAC,YAAA;IAAA,OAAMC,iBAAiB,CAAC5B,KAAK,CAAC,CAAA;GAAE,EAAA,CAACA,KAAK,CAAC,CAAC,CAAA;EACjE,IAAM6B,cAAc,GAAGF,OAAO,CAC5B,YAAA;AAAA,IAAA,IAAA,iBAAA,CAAA;AAAA,IAAA,OAAA,CAAA,iBAAA,GAAM9B,QAAQ,CAACiC,OAAO,MAAA,IAAA,IAAA,iBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAhB,kBAAkBC,WAAW,CAAA;GACnC,EAAA,CAAC7C,IAAI,CAAC8C,KAAK,EAAEnC,QAAQ,CAACiC,OAAO,CAAC,CAC/B,CAAA;AAED,EAAA,IAAMG,UAAU,GAAG,SAAbA,UAAU,CAAIjC,KAA+C,EAAK;AACtE,IAAA,IAAMkC,MAAM,GAAGC,MAAM,CAACnC,KAAK,EAAE,KAAK,CAAC,CAAA;IACnCC,QAAQ,CAACiC,MAAM,CAAC,CAAA;AAChB,IAAA,IAAI3C,QAAQ,EAAE;AACZA,MAAAA,QAAQ,CAAC2C,MAAM,CAACX,GAAG,CAAC,UAAAJ,IAAI,EAAA;AAAA,QAAA,OAAIiB,IAAI,CAACjB,IAAI,EAAE,IAAI,CAAC,CAAA;AAAA,OAAA,CAAC,CAAC,CAAA;AAChD,KAAA;GACD,CAAA;AAED,EAAA,IAAMkB,iBAAiB,GAAG,SAApBA,iBAAiB,CAAGC,UAAU,EAAI;IACtC/B,eAAe,CACbgC,GAAG,CAACD,UAAU,EAAE,mBAAmB,EAAE,IAAI,CAAC,GAAG,IAAI,GAAGC,GAAG,CAACD,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,CACxF,CAAA;GACF,CAAA;;AAED;AACF;AACA;AACA;AACA;AACA;EACE,IAAME,cAAc,GAAGC,oBAAoB,CACzC,UAACjB,EAAU,EAAEkB,IAAY,EAAEC,IAAY,EAAwB;IAAA,IAAtBC,SAAS,uEAAG,KAAK,CAAA;AACxD,IAAA,IAAI1C,eAAe,EAAE;AACnB,MAAA,OAAA;AACF,KAAA;AACA,IAAA,IAAMoB,GAAG,GAAIoB,IAAI,GAAGb,cAAc,GAAI,GAAG,CAAA;AACzC,IAAA,IAAMV,IAAI,GAAG0B,IAAI,CAAC7C,KAAK,EAAE;AAAEwB,MAAAA,EAAE,EAAFA,EAAAA;AAAG,KAAC,CAAC,CAAA;AAChC,IAAA,IAAImB,IAAI,IAAI7D,iBAAiB,IAAI6D,IAAI,IAAI9D,cAAc,EAAE;AACvDiE,MAAAA,gBAAgB,EAAE,CAAA;AAClB,MAAA,OAAA;AACF,KAAA;IAEA,IAAMC,WAAW,mCAAQ5B,IAAI,CAAA,EAAA,EAAA,EAAA;AAAEG,MAAAA,GAAG,EAAHA,GAAAA;KAAK,CAAA,CAAA;AAEpC,IAAA,IAAM0B,QAAQ,GAAGb,MAAM,8BAAKc,MAAM,CAACjD,KAAK,EAAE;AAAEwB,MAAAA,EAAE,EAAFA,EAAAA;AAAG,KAAC,CAAC,CAAA,EAAA,CAAEuB,WAAW,CAAA,CAAA,EAAG,KAAK,CAAC,CAAA;AAEvE,IAAA,IAAIH,SAAS,EAAE;MACbX,UAAU,CAACe,QAAQ,CAAC,CAAA;MACpB3C,eAAe,CAAC,IAAI,CAAC,CAAA;AACrB,MAAA,OAAA;AACF,KAAA;IAEAJ,QAAQ,CAAC+C,QAAQ,CAAC,CAAA;IAClB,IAAI,CAACE,UAAU,EAAE;MACf7C,eAAe,CAACmB,EAAE,CAAC,CAAA;AACrB,KAAA;GACD,EACD,CAAC,CACF,CAAA;AAED,EAAA,IAAM2B,SAAS,GAAG,SAAZA,SAAS,GAAS;AACtB,IAAA,IAAM7B,GAAG,GAAIhB,YAAY,GAAGuB,cAAc,GAAI,GAAG,CAAA;IACjD,IAAMH,QAAQ,GAAG0B,YAAY,CAC3BpD,KAAK,CAACuB,GAAG,CAAC,UAAA8B,IAAI,EAAA;MAAA,OAAK;QACjBhC,KAAK,EAAEgC,IAAI,CAAChC,KAAK;AACjBC,QAAAA,GAAG,EAAE+B,IAAI,CAAC/B,GAAG,GAAG,GAAA;OACjB,CAAA;AAAA,KAAC,CAAC,CACJ,CAAA;AAED,IAAA,IAAMD,KAAK,GAAA,GAAA,CAAA,MAAA,CAAOK,QAAQ,CAAC4B,KAAK,CAAChC,GAAG,GAAG,GAAG,CAAC,CAACiC,KAAK,EAAE,CAAE,CAAA;AACrD,IAAA,IAAMC,OAAO,GAAG;MAAEhC,EAAE,EAAEC,EAAM,EAAE;AAAEH,MAAAA,GAAG,EAAHA,GAAG;AAAED,MAAAA,KAAK,EAALA,KAAAA;KAAO,CAAA;AAC5CY,IAAAA,UAAU,CAAKjC,EAAAA,CAAAA,MAAAA,CAAAA,kBAAAA,CAAAA,KAAK,CAAEwD,EAAAA,CAAAA,OAAO,CAAE,CAAA,CAAA,CAAA;GAChC,CAAA;EAED,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIC,CAAmB,EAAElC,EAAE,EAAK;IACzD,IAAI9B,QAAQ,IAAIU,YAAY,EAAE;AAC5B,MAAA,OAAA;AACF,KAAA;IACAC,eAAe,CAACmB,EAAE,CAAC,CAAA;AACnBrB,IAAAA,kBAAkB,CAACuD,CAAC,CAACC,aAAa,CAAC,CAAA;GACpC,CAAA;AAED,EAAA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsB,GAAS;IACnC3B,UAAU,CAACjC,KAAK,CAAC,CAAA;IACjBK,eAAe,CAAC,IAAI,CAAC,CAAA;IACrBF,kBAAkB,CAAC,IAAI,CAAC,CAAA;GACzB,CAAA;AAED,EAAA,IAAM0D,2BAA2B,GAAG,SAA9BA,2BAA2B,CAAIC,GAAwC,EAAK;AAChF;AACA;AACA,IAAA,IAAIA,GAAG,CAACC,MAAM,CAACC,KAAK,KAAK,EAAE,EAAE;AAC3B,MAAA,IAAMC,YAAY,GAAGH,GAAG,CAACC,MAAM,CAAA;AAC/BG,MAAAA,UAAU,CAAC,YAAA;AAAA,QAAA,OAAMD,YAAY,KAAZA,IAAAA,IAAAA,YAAY,uBAAZA,YAAY,CAAEE,MAAM,EAAE,CAAA;OAAC,CAAA,CAAA;AAC1C,KAAA;AACA,IAAA,IAAMC,SAAS,GAAGC,KAAK,CAAC1D,MAAM,CAACmD,GAAG,CAACC,MAAM,CAACC,KAAK,CAAC,EAAEtD,SAAS,EAAEG,OAAO,CAAC,CAAA;IACrE,IAAI,CAACuD,SAAS,EAAE;AACdN,MAAAA,GAAG,CAACC,MAAM,CAACI,MAAM,EAAE,CAAA;AACrB,KAAA;IACA,IAAM7C,GAAG,GAAI,CAAC8C,SAAS,GAAG1D,SAAS,IAAII,KAAK,GAAI,GAAG,CAAA;AACnDb,IAAAA,QAAQ,CAACD,KAAK,CAACuB,GAAG,CAAC,UAAAJ,IAAI,EAAA;AAAA,MAAA,OAAKA,IAAI,CAACK,EAAE,KAAKpB,YAAY,mCAAQe,IAAI,CAAA,EAAA,EAAA,EAAA;AAAEG,QAAAA,GAAG,EAAHA,GAAAA;AAAG,OAAA,CAAA,GAAKH,IAAI,CAAA;AAAA,KAAC,CAAC,CAAC,CAAA;GAClF,CAAA;AAED,EAAA,IAAMmD,iBAAiB,GAAG,SAApBA,iBAAiB,CAAGC,QAAQ,EAAI;AACpC,IAAA,IAAMlD,KAAK,GAAGkD,QAAQ,CAACC,GAAG,CAAA;AAC1BvE,IAAAA,QAAQ,CAACD,KAAK,CAACuB,GAAG,CAAC,UAAAJ,IAAI,EAAA;AAAA,MAAA,OAAKA,IAAI,CAACK,EAAE,KAAKpB,YAAY,mCAAQe,IAAI,CAAA,EAAA,EAAA,EAAA;AAAEE,QAAAA,KAAK,EAALA,KAAAA;AAAK,OAAA,CAAA,GAAKF,IAAI,CAAA;AAAA,KAAC,CAAC,CAAC,CAAA;GACpF,CAAA;AAED,EAAA,IAAM2B,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;AAC7B,IAAA,IAAI9C,KAAK,CAACiB,MAAM,GAAG,CAAC,EAAE;AACpBgB,MAAAA,UAAU,CAACgB,MAAM,CAACjD,KAAK,EAAE;AAAEwB,QAAAA,EAAE,EAAEpB,YAAAA;AAAa,OAAC,CAAC,CAAC,CAAA;MAC/CD,kBAAkB,CAAC,IAAI,CAAC,CAAA;MACxBE,eAAe,CAAC,IAAI,CAAC,CAAA;AACvB,KAAA;GACD,CAAA;AAED,EAAA,IAAMoE,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,QAAgB,EAAK;IAChD,OAAOC,WAAW,CAACD,QAAQ,EAAE;AAAEhE,MAAAA,SAAS,EAATA,SAAS;AAAEG,MAAAA,OAAO,EAAPA,OAAAA;AAAQ,KAAC,CAAC,CAAA;GACrD,CAAA;AAED,EAAA,IAAM+D,gBAAgB,GAAG,CAAC1E,eAAe,IAAIS,MAAM,CAACC,QAAQ,CAACN,YAAY,CAAC,IAAI,CAACZ,QAAQ,CAAA;AAEvF,EAAA,IAAMmF,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAG3B,UAAU,EAAI;IAC1C,IAAI,CAACA,UAAU,EAAE;AACf,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;AACA,IAAA,IAAM4B,SAAS,GAAGpE,SAAS,GAAI,CAAAwC,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAVA,UAAU,CAAE5B,GAAG,IAAG,GAAG,GAAIR,KAAK,CAAA;AAC7D,IAAA,OAAOiE,WAAW,CAACD,SAAS,EAAEE,QAAQ,GAAG,GAAG,CAAC,CAAA;GAC9C,CAAA;AAED,EAAA,IAAM9B,UAAU,GAAGL,IAAI,CAAC7C,KAAK,EAAE;AAAEwB,IAAAA,EAAE,EAAEpB,YAAAA;AAAa,GAAC,CAAC,CAAA;AACpD,EAAA,IAAM4E,QAAQ,GAAGC,YAAY,CAACnE,KAAK,CAAC,CAAA;AAEpC,EAAA,IAAMoE,mBAAmB,GAAGL,qBAAqB,CAAC3B,UAAU,CAAC,CAAA;EAE7D,oBACEiC,IAAA,CAAA,KAAA,EAAA;IAAK,SAAS,EAAE3E,OAAO,CAAC4E,IAAK;AAAC,IAAA,KAAK,EAAE5F,KAAM;IAAA,QACxC,EAAA,CAAA,CAACG,OAAO,iBACPwF,IAAA,CAAA,KAAA,EAAA;MAAK,SAAS,EAAE3E,OAAO,CAAC6E,kBAAmB;MAAA,QACzC,EAAA,cAAAC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAA,QAAA,eACEH,KAAC,UAAU,EAAA;AAAC,UAAA,aAAA,EAAA,EAAA,CAAA,MAAA,CAAgBvF,SAAS,EAAQ,OAAA,CAAA;UAAC,SAAS,EAAEY,OAAO,CAAC+E,SAAU;UAAA,QACxE7E,EAAAA,CAAAA,SAAS,OAAGrB,IAAI,CAAA;AAAA,SAAA,CAAA;AACN,OAAA,CACT,eACNiG,GAAA,CAAA,KAAA,EAAA;AAAA,QAAA,QAAA,eACEH,KAAC,UAAU,EAAA;AAAC,UAAA,aAAA,EAAA,EAAA,CAAA,MAAA,CAAgBvF,SAAS,EAAM,KAAA,CAAA;UAAC,SAAS,EAAEY,OAAO,CAAC+E,SAAU;UAAA,QACtE1E,EAAAA,CAAAA,OAAO,OAAGxB,IAAI,CAAA;AAAA,SAAA,CAAA;OAEb,CAAA,CAAA;KAET,CAAA,eAEDiG,IAAC,mBAAmB,EAAA;AAAC,MAAA,iBAAiB,EAAEjD,iBAAkB;MAAA,QACxD,eAAA8C,IAAA,CAAA,KAAA,EAAA;AACE,QAAA,aAAA,EAAA,EAAA,CAAA,MAAA,CAAgBvF,SAAS,EAAS,QAAA,CAAA;QAClC,SAAS,EAAEY,OAAO,CAACgF,OAAQ;AAC3B,QAAA,KAAK,EAAE;AAAEC,UAAAA,UAAU,mCAA4B/D,QAAQ,EAAA,GAAA,CAAA;SAAM;AAC7D,QAAA,GAAG,EAAE7B,QAAS;AAAA,QAAA,QAAA,EAAA,CAEb+E,gBAAgB,iBACfU,GAAA,CAAA,KAAA,EAAA;AACE,UAAA,aAAA,EAAA,EAAA,CAAA,MAAA,CAAgB1F,SAAS,EAAa,YAAA,CAAA;UACtC,SAAS,EAAEY,OAAO,CAACkF,SAAU;AAC7B,UAAA,KAAK,EAAE;YAAEC,IAAI,EAAErF,YAAY,GAAGvB,aAAAA;WAAgB;AAC9C,UAAA,OAAO,EAAEoE,SAAU;AAAA,UAAA,QAAA,eAEnBmC,IAAC,GAAG,EAAA;AAAC,YAAA,QAAQ,EAAC,OAAO;YAAC,SAAS,EAAE9E,OAAO,CAACoF,OAAAA;AAAQ,WAAA,CAAA;SAEpD,CAAA,EAEA/D,cAAc,IACb7B,KAAK,CAACuB,GAAG,CAAC,iBAAqBH,KAAK,EAAA;UAAA,IAAvBE,GAAG,SAAHA,GAAG;AAAED,YAAAA,KAAK,SAALA,KAAK;AAAEG,YAAAA,EAAE,SAAFA,EAAE,CAAA;AAAA,UAAA;AAAA;AACzB;AACA,YAAA8D,GAAA,CAAC,SAAS,EAAA;AACR,cAAA,QAAQ,EAAE5F,QAAS;AAEnB,cAAA,IAAI,EAAC,GAAG;AACR,cAAA,MAAM,EAAE;gBACNiG,IAAI,EAAE,CAAC5G,aAAa;gBACpB8G,KAAK,EAAEhE,cAAc,GAAG9C,aAAa;AACrC+G,gBAAAA,GAAG,EAAEjH,cAAc;AACnBkH,gBAAAA,MAAM,EAAEjH,iBAAAA;eACR;AACF,cAAA,MAAM,EAAE,SAAA,MAAA,CAAC4E,CAAC,EAAEsC,QAAQ,EAAA;AAAA,gBAAA,OAClBxD,cAAc,CAAChB,EAAE,EAAEwE,QAAQ,CAACC,CAAC,GAAGlH,aAAa,EAAEiH,QAAQ,CAACE,CAAC,EAAE,KAAK,CAAC,CAAA;eAClE;AACD,cAAA,MAAM,EAAE,SAAA,MAAA,CAACxC,CAAC,EAAEsC,QAAQ,EAAA;AAAA,gBAAA,OAClBxD,cAAc,CAAChB,EAAE,EAAEwE,QAAQ,CAACC,CAAC,GAAGlH,aAAa,EAAEiH,QAAQ,CAACE,CAAC,EAAE,IAAI,CAAC,CAAA;eACjE;AACD,cAAA,QAAQ,EAAE;AACRD,gBAAAA,CAAC,EAAGpE,cAAc,GAAGP,GAAG,GAAI,GAAG,GAAGvC,aAAa;AAC/CmH,gBAAAA,CAAC,EAAElH,aAAAA;eACH;cAAA,QAEF,eAAAsG,GAAA,CAAA,KAAA,EAAA;gBACE,OAAO,EAAE,iBAAA5B,CAAC,EAAA;AAAA,kBAAA,OAAID,qBAAqB,CAACC,CAAC,EAAElC,EAAE,CAAC,CAAA;iBAAC;gBAC3C,aAAgB5B,EAAAA,EAAAA,CAAAA,MAAAA,CAAAA,SAAS,EAASwB,QAAAA,CAAAA,CAAAA,MAAAA,CAAAA,KAAK,CAAG;AAC1C,gBAAA,SAAS,EAAE+E,UAAU,CAAC3F,OAAO,CAAC4F,MAAM,EAAE;kBACpCC,SAAS,EAAEjG,YAAY,KAAKoB,EAAAA;AAC9B,iBAAC,CAAE;AACH,gBAAA,KAAK,EAAE;AAAE8E,kBAAAA,eAAe,EAAEjF,KAAAA;iBAAQ;AAAA,gBAAA,QAAA,eAElCiE,IAAC,OAAO,EAAA;AAAC,kBAAA,KAAK,EAAEb,mBAAmB,CAACnD,GAAG,CAAE;AAAC,kBAAA,SAAS,EAAC,KAAK;kBAAA,QACvD,eAAAgE,GAAA,CAAA,KAAA,EAAA;AAAK,oBAAA,KAAK,EAAE;AAAEiB,sBAAAA,MAAM,EAAE,MAAA;AAAO,qBAAA;AAAE,mBAAA,CAAA;AAAG,iBAAA,CAAA;AAC1B,eAAA,CAAA;AACN,aAAA,EA9BD/E,EAAE,CAAA;AA+BG,YAAA;AAAA,SACb,CAAC,CAAA;AAAA,OAAA,CAAA;AACA,KAAA,CACc,EAErBgF,OAAO,CAACtG,eAAe,CAAC,iBACvBiF,KAAC,OAAO,EAAA;AACN,MAAA,EAAE,EAAC,eAAe;AAClB,MAAA,IAAI,EAAEqB,OAAO,CAACtG,eAAe,CAAE;AAC/B,MAAA,QAAQ,EAAEA,eAAgB;AAC1B,MAAA,OAAO,EAAE0D,sBAAuB;AAChC,MAAA,YAAY,EAAE;AACZ6C,QAAAA,QAAQ,EAAE,QAAQ;AAClBC,QAAAA,UAAU,EAAE,MAAA;OACZ;AACF,MAAA,eAAe,EAAE;AACfD,QAAAA,QAAQ,EAAE,KAAK;AACfC,QAAAA,UAAU,EAAE,MAAA;OACZ;AAAA,MAAA,QAAA,EAAA,cAEFpB,IAAC,mBAAmB,EAAA;AAClB,QAAA,KAAK,EAAEpC,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAVA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,UAAU,CAAE7B,KAAM;AACzB,QAAA,QAAQ,EAAEiD,iBAAkB;AAC5B,QAAA,YAAY,EAAEqC,IAAK;AACnB,QAAA,yBAAyB,EAAE,KAAA;OAC3B,CAAA,eACFrB,IAAC,UAAU,EAAA;AACT,QAAA,aAAA,EAAA,EAAA,CAAA,MAAA,CAAgB1F,SAAS,EAAc,aAAA,CAAA;QACvC,SAAS,EAAEY,OAAO,CAACoG,YAAa;AAChC,QAAA,OAAO,EAAE9D,gBAAiB;AAAA,QAAA,QAAA,eAE1BwC,IAAC,UAAU,EAAA;UAAC,SAAS,EAAE9E,OAAO,CAACqG,UAAAA;AAAW,SAAA,CAAA;AAAG,OAAA,CAClC,EACZpH,kBAAkB,iBACjB6F,GAAA,CAAC,SAAS,EAAA;AACR,QAAA,aAAA,EAAA,EAAA,CAAA,MAAA,CAAgB1F,SAAS,EAAa,YAAA,CAAA;AACtC,QAAA,IAAI,EAAC,QAAQ;AACb,QAAA,OAAO,EAAC,UAAU;AAClB,QAAA,KAAK,EAAEsF,mBAAoB;AAC3B,QAAA,OAAO,EAAE;UAAEE,IAAI,EAAE5E,OAAO,CAACsG,YAAAA;SAAe;AACxC,QAAA,UAAU,EAAE;AACVC,UAAAA,UAAU,EAAE;AACVC,YAAAA,GAAG,EAAEtG,SAAS;AACduG,YAAAA,GAAG,EAAEpG,OAAO;AACZqG,YAAAA,IAAI,EAAElC,QAAQ;AACdmC,YAAAA,SAAS,EAAE,EAAA;WACZ;AACD3G,UAAAA,OAAO,EAAE;YACP4E,IAAI,EAAE5E,OAAO,CAAC4G,eAAe;YAC7BC,KAAK,EAAE7G,OAAO,CAAC8G,gBAAAA;AACjB,WAAA;SACA;QACF,SAAS,EAAA,IAAA;QACT,OAAO,EAAE,iBAAAxD,GAAG,EAAA;AAAA,UAAA,OAAIA,GAAG,CAACC,MAAM,CAACI,MAAM,EAAE,CAAA;SAAC;AACpC,QAAA,QAAQ,EAAEN,2BAA4B;QACtC,SAAS,EAAE,mBAAAC,GAAG,EAAA;AAAA,UAAA,OAAIA,GAAG,CAACyD,GAAG,KAAK,OAAO,IAAI3D,sBAAsB,EAAE,CAAA;AAAA,SAAA;OAEpE,CAAA,CAAA;KAEJ,CAAA,CAAA;GACG,CAAA,CAAA;AAEV,CAAC,CAAA;IAEY4D,cAAc,GAAGC,QAAQ,EAAE,CAACxI,uBAAuB;;;;"}

package/components/GradientPicker/GradientPicker.styles.js

@@ -1 +1,105 @@
-import{makeStyles as t}from"@material-ui/core";var e=t((function(t){return{root:{width:"100%",paddingBottom:"10px",paddingLeft:"12px",paddingRight:"12px"},indicatorContainer:{marginBottom:"12px",display:"flex",justifyContent:"space-between"},indicator:{fontSize:"12px",lineHeight:"14px"},mainBar:{position:"relative",height:"16px",width:"100%"},addIcon:{fontSize:"16px"},removeButton:{position:"absolute",bottom:"8px",left:"8px",padding:0,width:"36px",height:"36px","&:hover":{background:t.palette.background.b7}},deleteIcon:{fontSize:"20px",color:t.palette.primary.text6,"&:hover":{color:t.palette.primary.text1}},posTextfield:{position:"absolute",bottom:"14px",right:"8px",width:"64px","& input::-webkit-outer-spin-button":{"-webkit-appearance":"none",margin:0},"& input::-webkit-inner-spin-button":{"-webkit-appearance":"none",margin:0}},posOutlinedRoot:{height:"24px",background:t.palette.background.b6},posOutlinedInput:{color:t.palette.primary.text6,padding:"2px 4px",textAlign:"right",fontSize:"14px","&:focus":{color:t.palette.primary.text1}},addCircle:{position:"absolute",top:"-4px",width:"24px",height:"24px",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",background:"rgba(255, 255, 255, 0.3)",border:"1px solid #ffffff"},circle:function(t){var e=t.readonly;return{position:"absolute",width:"24px",height:"24px",borderRadius:"50%",border:e?"none":"1px solid #ffffff","&:hover":{border:e?"none":"3px solid #ffffff"},"&.highlight":{border:"3px solid #ffffff"}}}}}));export{e as useStyles};
+import { makeStyles } from '@material-ui/core';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    root: {
+      width: '100%',
+      paddingBottom: '10px',
+      paddingLeft: '12px',
+      paddingRight: '12px'
+    },
+    indicatorContainer: {
+      marginBottom: '12px',
+      display: 'flex',
+      justifyContent: 'space-between'
+    },
+    indicator: {
+      fontSize: '12px',
+      lineHeight: '14px'
+    },
+    mainBar: {
+      position: 'relative',
+      height: '16px',
+      width: '100%'
+    },
+    addIcon: {
+      fontSize: '16px'
+    },
+    removeButton: {
+      position: 'absolute',
+      bottom: '8px',
+      left: '8px',
+      padding: 0,
+      width: '36px',
+      height: '36px',
+      '&:hover': {
+        background: theme.palette.background.b7
+      }
+    },
+    deleteIcon: {
+      fontSize: '20px',
+      color: theme.palette.primary.text6,
+      '&:hover': {
+        color: theme.palette.primary.text1
+      }
+    },
+    posTextfield: {
+      position: 'absolute',
+      bottom: '14px',
+      right: '8px',
+      width: '64px',
+      '& input::-webkit-outer-spin-button': {
+        '-webkit-appearance': 'none',
+        margin: 0
+      },
+      '& input::-webkit-inner-spin-button': {
+        '-webkit-appearance': 'none',
+        margin: 0
+      }
+    },
+    posOutlinedRoot: {
+      height: '24px',
+      background: theme.palette.background.b6
+    },
+    posOutlinedInput: {
+      color: theme.palette.primary.text6,
+      padding: '2px 4px',
+      textAlign: 'right',
+      fontSize: '14px',
+      '&:focus': {
+        color: theme.palette.primary.text1
+      }
+    },
+    addCircle: {
+      position: 'absolute',
+      top: '-4px',
+      width: '24px',
+      height: '24px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: '50%',
+      background: 'rgba(255, 255, 255, 0.3)',
+      border: '1px solid #ffffff'
+    },
+    circle: function circle(_ref) {
+      var readonly = _ref.readonly;
+      return {
+        position: 'absolute',
+        width: '24px',
+        height: '24px',
+        borderRadius: '50%',
+        border: readonly ? 'none' : '1px solid #ffffff',
+        '&:hover': {
+          border: readonly ? 'none' : '3px solid #ffffff'
+        },
+        '&.highlight': {
+          border: '3px solid #ffffff'
+        }
+      };
+    }
+  };
+});
+
+export { useStyles };
+//# sourceMappingURL=GradientPicker.styles.js.map

package/components/GradientPicker/GradientPicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientPicker.styles.js","sources":["../../../src/components/GradientPicker/GradientPicker.styles.ts"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\n\nexport const useStyles = makeStyles<any, any>(theme => ({\n  root: {\n    width: '100%',\n    paddingBottom: '10px',\n    paddingLeft: '12px',\n    paddingRight: '12px',\n  },\n  indicatorContainer: {\n    marginBottom: '12px',\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  indicator: {\n    fontSize: '12px',\n    lineHeight: '14px',\n  },\n  mainBar: {\n    position: 'relative',\n    height: '16px',\n    width: '100%',\n  },\n  addIcon: {\n    fontSize: '16px',\n  },\n  removeButton: {\n    position: 'absolute',\n    bottom: '8px',\n    left: '8px',\n    padding: 0,\n    width: '36px',\n    height: '36px',\n    '&:hover': {\n      background: theme.palette.background.b7,\n    },\n  },\n  deleteIcon: {\n    fontSize: '20px',\n    color: theme.palette.primary.text6,\n    '&:hover': {\n      color: theme.palette.primary.text1,\n    },\n  },\n  posTextfield: {\n    position: 'absolute',\n    bottom: '14px',\n    right: '8px',\n    width: '64px',\n    '& input::-webkit-outer-spin-button': {\n      '-webkit-appearance': 'none',\n      margin: 0,\n    },\n    '& input::-webkit-inner-spin-button': {\n      '-webkit-appearance': 'none',\n      margin: 0,\n    }\n  },\n  posOutlinedRoot: {\n    height: '24px',\n    background: theme.palette.background.b6,\n  },\n  posOutlinedInput: {\n    color: theme.palette.primary.text6,\n    padding: '2px 4px',\n    textAlign: 'right',\n    fontSize: '14px',\n    '&:focus': {\n      color: theme.palette.primary.text1,\n    },\n  },\n  addCircle: {\n    position: 'absolute',\n    top: '-4px',\n    width: '24px',\n    height: '24px',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: '50%',\n    background: 'rgba(255, 255, 255, 0.3)',\n    border: '1px solid #ffffff',\n  },\n  circle: ({ readonly }) => ({\n    position: 'absolute',\n    width: '24px',\n    height: '24px',\n    borderRadius: '50%',\n    border: readonly ? 'none' : '1px solid #ffffff',\n    '&:hover': {\n      border: readonly ? 'none' : '3px solid #ffffff',\n    },\n    '&.highlight': {\n      border: '3px solid #ffffff',\n    }\n  })\n}));\n"],"names":["useStyles","makeStyles","theme","root","width","paddingBottom","paddingLeft","paddingRight","indicatorContainer","marginBottom","display","justifyContent","indicator","fontSize","lineHeight","mainBar","position","height","addIcon","removeButton","bottom","left","padding","background","palette","b7","deleteIcon","color","primary","text6","text1","posTextfield","right","margin","posOutlinedRoot","b6","posOutlinedInput","textAlign","addCircle","top","alignItems","borderRadius","border","circle","readonly"],"mappings":"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"}

package/components/GradientPicker/GradientPicker.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GradientPicker.utils.d.ts","sourceRoot":"","sources":["../../../src/components/GradientPicker/GradientPicker.utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,iBAAiB,CAAC,KAAK,KAAA,UAOtC;AAED,eAAO,MAAM,WAAW;;;SAkBvB,CAAC;AAEF,eAAO,MAAM,YAAY,wBAaxB,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,QAAQ,MAAM,QAEtD,CAAC;AAIF,eAAO,MAAM,mBAAmB,qBAO/B,CAAC"}
+{"version":3,"file":"GradientPicker.utils.d.ts","sourceRoot":"","sources":["../../../src/components/GradientPicker/GradientPicker.utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,iBAAiB,CAAC,KAAK,KAAA,UAOtC;AAED,eAAO,MAAM,WAAW;;;SAcvB,CAAC;AAEF,eAAO,MAAM,YAAY,wBAaxB,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,QAAQ,MAAM,QAEtD,CAAC;AAIF,eAAO,MAAM,mBAAmB,qBAO/B,CAAC"}

package/components/GradientPicker/GradientPicker.utils.js

@@ -1 +1,55 @@
-import{sortBy as r}from"lodash";import t from"numeral";function o(t){return t&&0!==t.length?r(t,"pos").map((function(r){var t=r.color,o=r.pos;return"".concat(t," ").concat(o,"%")})).join(","):"none"}var a=function(r,o){var a=o.fromValue,e=o.toValue;if(a===e)return String(a);var h=e-a,i=n(h),M=u(a+h*(r/100),i);if(Math.abs(i)>=1)return t(M).format("0,00");var f=Math.ceil(-Math.log10(i));return M.toFixed(Math.max(f,0))},n=function(r){var t=Math.pow(10,Math.floor(Math.log10(r)))/100;return r/t>=500&&(t*=5),r/t>250&&(t*=2),t>1?Math.round(t):1/Math.round(1/t)},u=function(r,t){return e(Math.round(r/t)*t)},e=function(r){if(!r)return r;var t=Math.ceil(Math.log10(Math.abs(r))),o=Math.round(Math.pow(10,15-t));return Math.round(r*o)/o};export{o as calcGradientStyle,n as getRangeStep,a as getStopText,e as reasonableRealValue,u as roundToStep};
+import { sortBy } from 'lodash';
+import numeral from 'numeral';
+
+function calcGradientStyle(stops) {
+  if (!stops || stops.length === 0) {
+    return 'none';
+  }
+  return sortBy(stops, 'pos').map(function (_ref) {
+    var color = _ref.color,
+      pos = _ref.pos;
+    return "".concat(color, " ").concat(pos, "%");
+  }).join(',');
+}
+var getStopText = function getStopText(position, _ref2) {
+  var fromValue = _ref2.fromValue,
+    toValue = _ref2.toValue;
+  if (fromValue === toValue) {
+    return String(fromValue);
+  }
+  var range = toValue - fromValue;
+  var step = getRangeStep(range);
+  var value = fromValue + range * (position / 100);
+  var roundedToStep = roundToStep(value, step);
+  if (Math.abs(step) >= 1) {
+    return numeral(roundedToStep).format('0,00');
+  }
+  var scale = Math.ceil(-Math.log10(step));
+  return roundedToStep.toFixed(Math.max(scale, 0));
+};
+var getRangeStep = function getRangeStep(range) {
+  var step = Math.pow(10, Math.floor(Math.log10(range))) / 100;
+  if (range / step >= 500) {
+    step = step * 5;
+  }
+  if (range / step > 250) {
+    step = step * 2;
+  }
+  var rounded = step > 1 ? Math.round(step) : 1 / Math.round(1 / step);
+  return rounded;
+};
+var roundToStep = function roundToStep(value, step) {
+  return reasonableRealValue(Math.round(value / step) * step);
+};
+var maxSafeIntegerDigitCount = 15;
+var reasonableRealValue = function reasonableRealValue(value) {
+  if (!value) {
+    return value;
+  }
+  var valueMagnitude = Math.ceil(Math.log10(Math.abs(value)));
+  var multiplier = Math.round(Math.pow(10, maxSafeIntegerDigitCount - valueMagnitude));
+  return Math.round(value * multiplier) / multiplier;
+};
+
+export { calcGradientStyle, getRangeStep, getStopText, reasonableRealValue, roundToStep };
+//# sourceMappingURL=GradientPicker.utils.js.map

package/components/GradientPicker/GradientPicker.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientPicker.utils.js","sources":["../../../src/components/GradientPicker/GradientPicker.utils.ts"],"sourcesContent":["import { sortBy } from 'lodash';\nimport numeral from 'numeral';\n\nexport function calcGradientStyle(stops) {\n  if (!stops || stops.length === 0) {\n    return 'none';\n  }\n  return sortBy(stops, 'pos')\n    .map(({ color, pos }) => `${color} ${pos}%`)\n    .join(',');\n};\n\nexport const getStopText = (position, { fromValue, toValue}) => {\n  if (fromValue === toValue) {\n    return String(fromValue);\n  }\n\n  const range = toValue - fromValue;\n\n  const step = getRangeStep(range);\n  const value = fromValue + range * (position / 100);\n  const roundedToStep = roundToStep(value, step);\n\n  if (Math.abs(step) >= 1) {\n    return numeral(roundedToStep).format('0,00');\n  }\n\n  const scale = Math.ceil(-Math.log10(step));\n\n  return roundedToStep.toFixed(Math.max(scale, 0));\n};\n\nexport const getRangeStep = (range) => {\n  let step = Math.pow(10, Math.floor(Math.log10(range))) / 100;\n\n  if (range / step >= 500) {\n    step = step * 5;\n  }\n  if (range / step > 250) {\n    step = step * 2;\n  }\n\n  const rounded = step > 1 ? Math.round(step) : 1 / Math.round(1 / step);\n\n  return rounded;\n};\n\nexport const roundToStep = (value: number, step: number) => {\n  return reasonableRealValue(Math.round(value / step) * step);\n};\n\nconst maxSafeIntegerDigitCount = 15;\n\nexport const reasonableRealValue = value => {\n  if (!value) {\n    return value;\n  }\n  const valueMagnitude = Math.ceil(Math.log10(Math.abs(value)));\n  const multiplier = Math.round(Math.pow(10, maxSafeIntegerDigitCount - valueMagnitude));\n  return Math.round(value * multiplier) / multiplier;\n};\n"],"names":["calcGradientStyle","stops","length","sortBy","map","color","pos","join","getStopText","position","fromValue","toValue","String","range","step","getRangeStep","value","roundedToStep","roundToStep","Math","abs","numeral","format","scale","ceil","log10","toFixed","max","pow","floor","rounded","round","reasonableRealValue","maxSafeIntegerDigitCount","valueMagnitude","multiplier"],"mappings":"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"}

package/components/HeaderLayout/HeaderLayout.css.js

@@ -1 +1,8 @@
-import e from'./../../ext-esm/style-inject/dist/style-inject.es.js';var a={layoutContainer:"HeaderLayout_layoutContainer__w0Y9c",layoutTopLarge:"HeaderLayout_layoutTopLarge__n-g8a",layoutTopRightLarge:"HeaderLayout_layoutTopRightLarge__Jr9yh",layoutTopSmall:"HeaderLayout_layoutTopSmall__4ZxAb",assetChips:"HeaderLayout_assetChips__kvLY7",layoutBottomSmall:"HeaderLayout_layoutBottomSmall__Tl-yE",layoutOffsetpicker:"HeaderLayout_layoutOffsetpicker__gGVNO",layoutOffsetwellChipsLarge:"HeaderLayout_layoutOffsetwellChipsLarge__5EUUe",layoutOffsetwellChipsSmall:"HeaderLayout_layoutOffsetwellChipsSmall__HnEkc"};e(".HeaderLayout_layoutContainer__w0Y9c{display:flex;flex-direction:column}.HeaderLayout_layoutTopLarge__n-g8a{align-items:center;display:flex;justify-content:space-between}.HeaderLayout_layoutTopRightLarge__Jr9yh{align-items:baseline;display:flex;justify-content:end;overflow:hidden;width:auto}.HeaderLayout_layoutTopSmall__4ZxAb{align-items:center;display:flex;justify-content:space-between;overflow:hidden;width:auto}.HeaderLayout_assetChips__kvLY7{display:flex;justify-content:end;overflow:hidden}.HeaderLayout_layoutBottomSmall__Tl-yE{align-items:baseline;display:flex;flex-wrap:wrap;justify-content:flex-start;padding-top:8px}.HeaderLayout_layoutOffsetpicker__gGVNO{align-items:center;display:flex}.HeaderLayout_layoutOffsetwellChipsLarge__5EUUe{display:flex;flex-wrap:wrap;justify-content:flex-end}.HeaderLayout_layoutOffsetwellChipsSmall__HnEkc{display:flex;flex-wrap:wrap;justify-content:flex-start}");export{a as default};
+import styleInject from './../../ext-esm/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".HeaderLayout_layoutContainer__w0Y9c {\n  display: flex;\n  flex-direction: column;\n}\n\n.HeaderLayout_layoutTopLarge__n-g8a {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.HeaderLayout_layoutTopRightLarge__Jr9yh {\n  display: flex;\n  align-items: baseline;\n  justify-content: end;\n  width: auto;\n  overflow: hidden;\n}\n\n.HeaderLayout_layoutTopSmall__4ZxAb {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: auto;\n  overflow: hidden;\n}\n\n.HeaderLayout_assetChips__kvLY7 {\n  overflow: hidden;\n  display: flex;\n  justify-content: end;\n}\n\n.HeaderLayout_layoutBottomSmall__Tl-yE {\n  display: flex;\n  align-items: baseline;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  padding-top: 8px;\n}\n\n.HeaderLayout_layoutOffsetpicker__gGVNO {\n  display: flex;\n  align-items: center;\n}\n\n.HeaderLayout_layoutOffsetwellChipsLarge__5EUUe {\n  display: flex;\n  justify-content: flex-end;\n  flex-wrap: wrap;\n}\n\n.HeaderLayout_layoutOffsetwellChipsSmall__HnEkc {\n  display: flex;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n}\n";
+var styles = {"layoutContainer":"HeaderLayout_layoutContainer__w0Y9c","layoutTopLarge":"HeaderLayout_layoutTopLarge__n-g8a","layoutTopRightLarge":"HeaderLayout_layoutTopRightLarge__Jr9yh","layoutTopSmall":"HeaderLayout_layoutTopSmall__4ZxAb","assetChips":"HeaderLayout_assetChips__kvLY7","layoutBottomSmall":"HeaderLayout_layoutBottomSmall__Tl-yE","layoutOffsetpicker":"HeaderLayout_layoutOffsetpicker__gGVNO","layoutOffsetwellChipsLarge":"HeaderLayout_layoutOffsetwellChipsLarge__5EUUe","layoutOffsetwellChipsSmall":"HeaderLayout_layoutOffsetwellChipsSmall__HnEkc"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=HeaderLayout.css.js.map