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

package/components/GradientPicker/GradientPicker.js

@@ -1,365 +1 @@
-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
+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};

package/components/GradientPicker/GradientPicker.styles.js

@@ -1,105 +1 @@
-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
+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};

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;;;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"}
+{"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"}

package/components/GradientPicker/GradientPicker.utils.js

@@ -1,55 +1 @@
-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
+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};

package/components/HeaderLayout/HeaderLayout.css.js

@@ -1,8 +1 @@
-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
+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};