@corva/ui 0.34.0-rc.3 → 0.34.0

package/components/ColorPicker/ColorPicker.js

@@ -1,212 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import chroma from 'chroma-js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { withStyles, InputLabel, IconButton, Popover } from '@material-ui/core';
-import { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { ColorLens } from '@material-ui/icons';
-import PaletteChromePicker from './PaletteChromePicker/PaletteChromePicker.js';
-
-var Checkboard = "/static/media/39f55985e0da1489ad22264208b0493d.svg";
-var muiStyles = {
-  root: {
-    position: 'relative',
-    display: 'flex'
-  },
-  topLabelRoot: {
-    flexDirection: 'column'
-  },
-  rightLabelRoot: {
-    flexDirection: 'row-reverse',
-    justifyContent: 'flex-end',
-    alignItems: 'center'
-  },
-  button: {
-    width: '36px',
-    height: '24px',
-    boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.161)',
-    borderRadius: '5px'
-  },
-  buttonTransparrent: {
-    position: 'relative',
-    backgroundImage: "url(".concat(Checkboard, ")"),
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    '&::before': {
-      content: '""',
-      position: 'absolute',
-      display: 'block',
-      width: '100%',
-      height: '3px',
-      background: '#FF0000',
-      transform: 'rotate(148deg)',
-      borderRadius: '2px'
-    }
-  },
-  colorLensIcon: {
-    position: 'relative',
-    zIndex: 2
-  },
-  popper: {
-    zIndex: 1500
-  },
-  topLabel: {
-    marginBottom: '8px',
-    fontSize: '15px',
-    lineHeight: '17px',
-    letterSpacing: '0.4px',
-    color: '#BDBDBD',
-    whiteSpace: 'nowrap'
-  },
-  rightLabel: {
-    marginLeft: '8px',
-    fontSize: '16px'
-  }
-};
-var converters = {
-  rgba: function rgba(c) {
-    return "rgba(".concat(c.rgb.r, ", ").concat(c.rgb.g, ", ").concat(c.rgb.b, ", ").concat(c.rgb.a, ")");
-  },
-  rgb: function rgb(c) {
-    return "rgb(".concat(c.rgb.r, ", ").concat(c.rgb.g, ", ").concat(c.rgb.b, ")");
-  },
-  hex: function hex(c) {
-    return c.hex;
-  },
-  rgba_rgb: function rgba_rgb(c) {
-    return c.rgb.a === 1 ? converters.rgb(c) : converters.rgba(c);
-  },
-  rgba_hex: function rgba_hex(c) {
-    return c.rgb.a === 1 ? converters.hex(c) : converters.rgba(c);
-  }
-};
-
-var ColorPicker = function ColorPicker(_ref) {
-  var _classNames, _classNames2;
-
-  var label = _ref.label,
-      value = _ref.value,
-      converter = _ref.converter,
-      onChange = _ref.onChange,
-      buttonClassName = _ref.buttonClassName,
-      popoverAnchorOrigin = _ref.popoverAnchorOrigin,
-      popoverTransformOrigin = _ref.popoverTransformOrigin,
-      labelPosition = _ref.labelPosition,
-      hideLabel = _ref.hideLabel,
-      PickerComponent = _ref.pickerComponent,
-      classes = _ref.classes,
-      lensColor = _ref.lensColor,
-      enableTransparencyPalette = _ref.enableTransparencyPalette;
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      anchorEl = _useState2[0],
-      setAnchorEl = _useState2[1];
-
-  var _useState3 = useState(value),
-      _useState4 = _slicedToArray(_useState3, 2),
-      color = _useState4[0],
-      setColor = _useState4[1];
-
-  var popperInstanceRef = useRef();
-  useEffect(function () {
-    setColor(value);
-  }, [value]);
-
-  var handleOpen = function handleOpen(e) {
-    setAnchorEl(e.currentTarget);
-  };
-
-  var handleClose = function handleClose() {
-    setAnchorEl(null);
-  };
-
-  var handleChange = function handleChange(nextColor) {
-    var convertedColor = converters[converter](nextColor);
-    setColor(convertedColor);
-    onChange(convertedColor);
-  };
-
-  var updatePopperPosition = function updatePopperPosition() {
-    if (popperInstanceRef.current) {
-      popperInstanceRef.current.updatePosition();
-    }
-  };
-
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames(classes.root, (_classNames = {}, _defineProperty(_classNames, classes.topLabelRoot, labelPosition === 'top'), _defineProperty(_classNames, classes.rightLabelRoot, labelPosition === 'right'), _classNames)),
-    children: [!hideLabel && /*#__PURE__*/jsx(InputLabel, {
-      className: classNames((_classNames2 = {}, _defineProperty(_classNames2, classes.topLabel, labelPosition === 'top'), _defineProperty(_classNames2, classes.rightLabel, labelPosition === 'right'), _classNames2)),
-      shrink: true,
-      children: label
-    }), /*#__PURE__*/jsx(IconButton, {
-      className: classNames(classes.button, buttonClassName, _defineProperty({}, classes.buttonTransparrent, chroma(color).alpha() === 0)),
-      disableRipple: true,
-      style: {
-        backgroundColor: color,
-        color: lensColor
-      },
-      onClick: handleOpen,
-      children: /*#__PURE__*/jsx(ColorLens, {
-        fontSize: "small",
-        className: classes.colorLensIcon
-      })
-    }), /*#__PURE__*/jsx(Popover, {
-      id: "colors-popper",
-      action: popperInstanceRef,
-      open: Boolean(anchorEl),
-      anchorEl: anchorEl,
-      onClose: handleClose,
-      anchorOrigin: popoverAnchorOrigin,
-      transformOrigin: popoverTransformOrigin,
-      children: /*#__PURE__*/jsx(PickerComponent, {
-        color: color,
-        onChange: handleChange,
-        onSizeChange: updatePopperPosition,
-        enableTransparencyPalette: enableTransparencyPalette
-      })
-    })]
-  });
-};
-
-ColorPicker.propTypes = {
-  buttonClassName: PropTypes.string,
-  label: PropTypes.string,
-  value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  converter: PropTypes.oneOf(Object.keys(converters)),
-  classes: PropTypes.shape({
-    button: PropTypes.string.isRequired
-  }).isRequired,
-  pickerComponent: PropTypes.node,
-  labelPosition: PropTypes.oneOf(['top', 'right']),
-  popoverAnchorOrigin: PropTypes.shape({}),
-  popoverTransformOrigin: PropTypes.shape({}),
-  hideLabel: PropTypes.bool,
-  lensColor: PropTypes.string,
-  enableTransparencyPalette: PropTypes.bool
-};
-ColorPicker.defaultProps = {
-  label: 'Color',
-  buttonClassName: null,
-  converter: 'rgba_hex',
-  pickerComponent: PaletteChromePicker,
-  hideLabel: false,
-  popoverAnchorOrigin: {
-    vertical: 'bottom',
-    horizontal: 'left'
-  },
-  popoverTransformOrigin: {
-    vertical: 'top',
-    horizontal: 'left'
-  },
-  labelPosition: 'top',
-  lensColor: '#fff',
-  enableTransparencyPalette: false
-};
-var ColorPicker$1 = withStyles(muiStyles)(ColorPicker);
-
-export default ColorPicker$1;
-//# sourceMappingURL=ColorPicker.js.map
+import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/slicedToArray";import{useState as o,useRef as n,useEffect as t}from"react";import a from"prop-types";import{withStyles as i,InputLabel as l,IconButton as c,Popover as p}from"@material-ui/core";import{ColorLens as s}from"@material-ui/icons";import b from"chroma-js";import g from"classnames";import u from"./PaletteChromePicker/PaletteChromePicker.js";import{jsxs as m,jsx as h}from"react/jsx-runtime";var f={root:{position:"relative",display:"flex"},topLabelRoot:{flexDirection:"column"},rightLabelRoot:{flexDirection:"row-reverse",justifyContent:"flex-end",alignItems:"center"},button:{width:"36px",height:"24px",boxShadow:"0px 3px 6px rgba(0, 0, 0, 0.161)",borderRadius:"5px"},buttonTransparrent:{position:"relative",backgroundImage:"url(".concat("/static/media/39f55985e0da1489ad22264208b0493d.svg",")"),backgroundSize:"cover",backgroundPosition:"center","&::before":{content:'""',position:"absolute",display:"block",width:"100%",height:"3px",background:"#FF0000",transform:"rotate(148deg)",borderRadius:"2px"}},colorLensIcon:{position:"relative",zIndex:2},popper:{zIndex:1500},topLabel:{marginBottom:"8px",fontSize:"15px",lineHeight:"17px",letterSpacing:"0.4px",color:"#BDBDBD",whiteSpace:"nowrap"},rightLabel:{marginLeft:"8px",fontSize:"16px"}},d={rgba:function(e){return"rgba(".concat(e.rgb.r,", ").concat(e.rgb.g,", ").concat(e.rgb.b,", ").concat(e.rgb.a,")")},rgb:function(e){return"rgb(".concat(e.rgb.r,", ").concat(e.rgb.g,", ").concat(e.rgb.b,")")},hex:function(e){return e.hex},rgba_rgb:function(e){return 1===e.rgb.a?d.rgb(e):d.rgba(e)},rgba_hex:function(e){return 1===e.rgb.a?d.hex(e):d.rgba(e)}},x=function(a){var i,u,f=a.label,x=a.value,v=a.converter,C=a.onChange,P=a.buttonClassName,k=a.popoverAnchorOrigin,L=a.popoverTransformOrigin,y=a.labelPosition,T=a.hideLabel,O=a.pickerComponent,R=a.classes,z=a.lensColor,S=a.enableTransparencyPalette,N=o(null),w=r(N,2),I=w[0],j=w[1],B=o(x),D=r(B,2),q=D[0],A=D[1],_=n();t((function(){A(x)}),[x]);return m("div",{className:g(R.root,(i={},e(i,R.topLabelRoot,"top"===y),e(i,R.rightLabelRoot,"right"===y),i)),children:[!T&&h(l,{className:g((u={},e(u,R.topLabel,"top"===y),e(u,R.rightLabel,"right"===y),u)),shrink:!0,children:f}),h(c,{className:g(R.button,P,e({},R.buttonTransparrent,0===b(q).alpha())),disableRipple:!0,style:{backgroundColor:q,color:z},onClick:function(e){j(e.currentTarget)},children:h(s,{fontSize:"small",className:R.colorLensIcon})}),h(p,{id:"colors-popper",action:_,open:Boolean(I),anchorEl:I,onClose:function(){j(null)},anchorOrigin:k,transformOrigin:L,children:h(O,{color:q,onChange:function(e){var r=d[v](e);A(r),C(r)},onSizeChange:function(){_.current&&_.current.updatePosition()},enableTransparencyPalette:S})})]})};x.propTypes={buttonClassName:a.string,label:a.string,value:a.string.isRequired,onChange:a.func.isRequired,converter:a.oneOf(Object.keys(d)),classes:a.shape({button:a.string.isRequired}).isRequired,pickerComponent:a.node,labelPosition:a.oneOf(["top","right"]),popoverAnchorOrigin:a.shape({}),popoverTransformOrigin:a.shape({}),hideLabel:a.bool,lensColor:a.string,enableTransparencyPalette:a.bool},x.defaultProps={label:"Color",buttonClassName:null,converter:"rgba_hex",pickerComponent:u,hideLabel:!1,popoverAnchorOrigin:{vertical:"bottom",horizontal:"left"},popoverTransformOrigin:{vertical:"top",horizontal:"left"},labelPosition:"top",lensColor:"#fff",enableTransparencyPalette:!1};var v=i(f)(x);export{v as default};

package/components/ColorPicker/PaletteChromePicker/ColorSquare/ColorSquare.js

@@ -1,83 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import chroma from 'chroma-js';
-import { jsx } from 'react/jsx-runtime';
-import { makeStyles } from '@material-ui/core';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
-
-var Checkboard = "/static/media/39f55985e0da1489ad22264208b0493d.svg";
-var useStyles = makeStyles({
-  container: {
-    position: 'relative',
-    cursor: 'pointer',
-    width: '16px',
-    height: '16px',
-    borderRadius: '2px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    '&:hover': {
-      border: '1px solid white'
-    }
-  },
-  containerSelected: {
-    border: '1px solid white',
-    '& $squareCheck': {
-      visibility: 'visible'
-    }
-  },
-  transparentContainer: {
-    position: 'relative',
-    border: '1px solid #C4C4C4;',
-    backgroundImage: "url(".concat(Checkboard, ")"),
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    '&::before': {
-      content: '""',
-      position: 'absolute',
-      display: 'block',
-      width: '100%',
-      height: '2px',
-      background: '#FF0000',
-      transform: 'rotate(135deg)',
-      borderRadius: '2px'
-    }
-  },
-  squareCheck: {
-    width: '16px',
-    height: '16px',
-    color: 'white',
-    visibility: 'hidden',
-    zIndex: 2
-  }
-});
-
-function ColorSquare(_ref) {
-  var _classNames;
-
-  var color = _ref.color,
-      isSelected = _ref.isSelected,
-      onClick = _ref.onClick;
-  var classes = useStyles();
-  return /*#__PURE__*/jsx("div", {
-    className: classNames(classes.container, (_classNames = {}, _defineProperty(_classNames, classes.transparentContainer, chroma(color).alpha() === 0), _defineProperty(_classNames, classes.containerSelected, isSelected), _classNames)),
-    style: {
-      backgroundColor: color
-    },
-    onClick: onClick,
-    children: /*#__PURE__*/jsx(CheckRoundedIcon, {
-      fontSize: "small",
-      className: classes.squareCheck
-    })
-  });
-}
-
-ColorSquare.propTypes = {
-  color: PropTypes.string.isRequired,
-  isSelected: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired
-};
-
-export default ColorSquare;
-//# sourceMappingURL=ColorSquare.js.map
+import e from"@babel/runtime/helpers/defineProperty";import r from"prop-types";import i from"@material-ui/icons/CheckRounded";import{makeStyles as o}from"@material-ui/core";import t from"classnames";import a from"chroma-js";import{jsx as n}from"react/jsx-runtime";var s=o({container:{position:"relative",cursor:"pointer",width:"16px",height:"16px",borderRadius:"2px",display:"flex",justifyContent:"center",alignItems:"center","&:hover":{border:"1px solid white"}},containerSelected:{border:"1px solid white","& $squareCheck":{visibility:"visible"}},transparentContainer:{position:"relative",border:"1px solid #C4C4C4;",backgroundImage:"url(".concat("/static/media/39f55985e0da1489ad22264208b0493d.svg",")"),backgroundSize:"cover",backgroundPosition:"center","&::before":{content:'""',position:"absolute",display:"block",width:"100%",height:"2px",background:"#FF0000",transform:"rotate(135deg)",borderRadius:"2px"}},squareCheck:{width:"16px",height:"16px",color:"white",visibility:"hidden",zIndex:2}});function c(r){var o,c=r.color,d=r.isSelected,l=r.onClick,p=s();return n("div",{className:t(p.container,(o={},e(o,p.transparentContainer,0===a(c).alpha()),e(o,p.containerSelected,d),o)),style:{backgroundColor:c},onClick:l,children:n(i,{fontSize:"small",className:p.squareCheck})})}c.propTypes={color:r.string.isRequired,isSelected:r.bool.isRequired,onClick:r.func.isRequired};export{c as default};

package/components/ColorPicker/PaletteChromePicker/Palette/Palette.css.js

@@ -1,8 +1 @@
-import styleInject from '../../../../ext-esm/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".Palette_paletteContainer__36NkJ {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, 16px);\n  gap: 2px;\n  width: 232px;\n}\n";
-var styles = {"paletteContainer":"Palette_paletteContainer__36NkJ"};
-styleInject(css_248z);
-
-export default styles;
-//# sourceMappingURL=Palette.css.js.map
+import t from'./../../../../ext-esm/style-inject/dist/style-inject.es.js';var e={paletteContainer:"Palette_paletteContainer__S2Z3b"};t(".Palette_paletteContainer__S2Z3b{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,16px);width:232px}");export{e as default};

package/components/ColorPicker/PaletteChromePicker/Palette/Palette.js

@@ -1,49 +1 @@
-import chroma from 'chroma-js';
-import { jsx } from 'react/jsx-runtime';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { CustomPicker } from 'react-color';
-import ColorSquare from '../ColorSquare/ColorSquare.js';
-import { paletteColorsWithTransparent, paletteColors } from './PaletteConstants.js';
-import styles from './Palette.css.js';
-
-var isSelected = function isSelected(currentColor, predefinedColor) {
-  var currentColorAlpha = chroma(currentColor).alpha();
-  var predefinedColorAlpha = chroma(predefinedColor).alpha();
-  if (!currentColorAlpha) return currentColorAlpha === predefinedColorAlpha;
-  return currentColor === predefinedColor;
-};
-
-var Palette = function Palette(_ref) {
-  var onChange = _ref.onChange,
-      color = _ref.color,
-      className = _ref.className,
-      enableTransparencyPalette = _ref.enableTransparencyPalette;
-  var colors = enableTransparencyPalette ? paletteColorsWithTransparent : paletteColors;
-  return /*#__PURE__*/jsx("div", {
-    className: classNames(styles.paletteContainer, className),
-    children: colors.map(function (predefinedColor) {
-      return /*#__PURE__*/jsx(ColorSquare, {
-        color: predefinedColor,
-        isSelected: isSelected(color, predefinedColor),
-        onClick: function onClick() {
-          onChange(predefinedColor);
-        }
-      }, predefinedColor);
-    })
-  });
-};
-
-Palette.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  color: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  enableTransparencyPalette: PropTypes.bool.isRequired
-};
-Palette.defaultProps = {
-  className: null
-};
-var Palette$1 = CustomPicker(Palette);
-
-export default Palette$1;
-//# sourceMappingURL=Palette.js.map
+import r from"prop-types";import{CustomPicker as e}from"react-color";import o from"classnames";import a from"chroma-js";import t from"../ColorSquare/ColorSquare.js";import{paletteColorsWithTransparent as n,paletteColors as s}from"./PaletteConstants.js";import l from"./Palette.css.js";import{jsx as i}from"react/jsx-runtime";var m=function(r,e){var o=a(r).alpha(),t=a(e).alpha();return o?r===e:o===t},c=function(r){var e=r.onChange,a=r.color,c=r.className,p=r.enableTransparencyPalette?n:s;return i("div",{className:o(l.paletteContainer,c),children:p.map((function(r){return i(t,{color:r,isSelected:m(a,r),onClick:function(){e(r)}},r)}))})};c.propTypes={onChange:r.func.isRequired,color:r.string.isRequired,className:r.string,enableTransparencyPalette:r.bool.isRequired},c.defaultProps={className:null};var p=e(c);export{p as default};

package/components/ColorPicker/PaletteChromePicker/Palette/PaletteConstants.js

@@ -1,11 +1 @@
-var paletteColors = [// row 1
-'#c4c4c4', '#9b2310', '#ac5d09', '#a99704', '#6f920d', '#408e00', '#05907b', '#028597', '#295abb', '#4d2fbf', '#8a1caa', '#921d48', '#445f6c', // row 2
-'#000000', '#eb3f24', '#ff8200', '#ffe300', '#b9ed24', '#7eed24', '#1edcc1', '#00e0ff', '#558dfc', '#714cff', '#cc2afb', '#f6377c', '#738e9d', // row 3
-'#ffffff', '#fe8977', '#fbb368', '#fff17f', '#d6ff61', '#b9ff81', '#78feea', '#79efff', '#97baff', '#ad99fb', '#e488ff', '#ff87b3', '#bbc6cc'];
-var TRANSPARENT_HEX = '#00000000';
-var paletteColorsWithTransparent = paletteColors.map(function (color, i) {
-  return i === 0 ? TRANSPARENT_HEX : color;
-});
-
-export { TRANSPARENT_HEX, paletteColors, paletteColorsWithTransparent };
-//# sourceMappingURL=PaletteConstants.js.map
+var f=["#c4c4c4","#9b2310","#ac5d09","#a99704","#6f920d","#408e00","#05907b","#028597","#295abb","#4d2fbf","#8a1caa","#921d48","#445f6c","#000000","#eb3f24","#ff8200","#ffe300","#b9ed24","#7eed24","#1edcc1","#00e0ff","#558dfc","#714cff","#cc2afb","#f6377c","#738e9d","#ffffff","#fe8977","#fbb368","#fff17f","#d6ff61","#b9ff81","#78feea","#79efff","#97baff","#ad99fb","#e488ff","#ff87b3","#bbc6cc"],c="#00000000",b=f.map((function(f,c){return 0===c?"#00000000":f}));export{c as TRANSPARENT_HEX,f as paletteColors,b as paletteColorsWithTransparent};

package/components/ColorPicker/PaletteChromePicker/PaletteChromePicker.js

@@ -1,177 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyles, Tooltip, IconButton } from '@material-ui/core';
-import { forwardRef, useState, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { ChromePicker } from 'react-color';
-import PaletteIcon from '@material-ui/icons/Palette';
-import ColorizeIcon from '@material-ui/icons/Colorize';
-import Palette from './Palette/Palette.js';
-
-var COLOR_PICK_MODE = {
-  PALETTE: 'PALETTE',
-  CHROME_PICKER: 'CHROME_PICKER'
-};
-var chromePickerStyles = {
-  default: {
-    picker: {
-      width: '100%',
-      boxShadow: 'none'
-    },
-    body: {
-      backgroundColor: '#3b3b3b',
-      padding: '16px 16px 0'
-    },
-    color: {
-      width: '32px',
-      height: '32px',
-      marginRight: '16px',
-      borderRadius: '2px'
-    },
-    swatch: {
-      marginTop: 0,
-      width: '100%',
-      height: '100%',
-      borderRadius: 0,
-      position: 'relative',
-      overflow: 'hidden'
-    },
-    toggles: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'space-between'
-    },
-    Alpha: {
-      checkboard: {
-        display: 'none'
-      },
-      gradient: {
-        borderRadius: '5px'
-      }
-    }
-  }
-};
-var useStyles = makeStyles({
-  container: {
-    backgroundColor: '#3b3b3b',
-    boxShadow: '0px 3px 10px rgba(0, 0, 0, 0.4)',
-    width: '250px',
-    paddingBottom: '8px',
-    borderRadius: '4px',
-    '& input': {
-      border: '1px solid #616161 !important',
-      backgroundColor: '#3b3b3b',
-      color: '#fff !important',
-      boxShadow: 'none !important',
-      outline: 'none'
-    },
-    '& svg:not(.MuiSvgIcon-root)': {
-      fill: '#bdbdbd !important'
-    }
-  },
-  chomePickerPalette: {
-    margin: '0 8px',
-    paddingTop: '8px'
-  },
-  buttonsContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-    marginTop: '8px'
-  },
-  iconButton: {
-    padding: '8px',
-    '&:hover': {
-      backgroundColor: '#333333'
-    },
-    '&:hover $icon': {
-      color: '#fff'
-    }
-  },
-  icon: {
-    color: '#bdbdbd',
-    fontSize: '24px'
-  },
-  iconActive: {
-    color: '#fff'
-  },
-  tooltip: {
-    background: '#414141',
-    color: '#fff',
-    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.12)',
-    borderRadius: '4px',
-    opacity: 1,
-    fontSize: '11px'
-  }
-});
-var PaletteChromePicker = forwardRef(function (_ref, ref) {
-  var color = _ref.color,
-      onChange = _ref.onChange,
-      onSizeChange = _ref.onSizeChange,
-      enableTransparencyPalette = _ref.enableTransparencyPalette;
-  var classes = useStyles();
-
-  var _useState = useState(COLOR_PICK_MODE.PALETTE),
-      _useState2 = _slicedToArray(_useState, 2),
-      pickMode = _useState2[0],
-      setPickMode = _useState2[1];
-
-  useLayoutEffect(onSizeChange, [pickMode]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classes.container,
-    ref: ref,
-    children: [pickMode === COLOR_PICK_MODE.PALETTE && /*#__PURE__*/jsx(Palette, {
-      className: classes.chomePickerPalette,
-      color: color,
-      onChange: onChange,
-      enableTransparencyPalette: enableTransparencyPalette
-    }), pickMode === COLOR_PICK_MODE.CHROME_PICKER && /*#__PURE__*/jsx(ChromePicker, {
-      styles: chromePickerStyles,
-      color: color,
-      onChange: onChange
-    }), /*#__PURE__*/jsxs("div", {
-      className: classes.buttonsContainer,
-      children: [/*#__PURE__*/jsx(Tooltip, {
-        title: "Palette",
-        classes: {
-          tooltip: classes.tooltip
-        },
-        children: /*#__PURE__*/jsx(IconButton, {
-          className: classes.iconButton,
-          onClick: function onClick() {
-            return setPickMode(COLOR_PICK_MODE.PALETTE);
-          },
-          children: /*#__PURE__*/jsx(PaletteIcon, {
-            className: classNames(classes.icon, _defineProperty({}, classes.iconActive, pickMode === COLOR_PICK_MODE.PALETTE)),
-            fontSize: "small"
-          })
-        })
-      }), /*#__PURE__*/jsx(Tooltip, {
-        title: "Pick your own",
-        classes: {
-          tooltip: classes.tooltip
-        },
-        children: /*#__PURE__*/jsx(IconButton, {
-          className: classes.iconButton,
-          onClick: function onClick() {
-            return setPickMode(COLOR_PICK_MODE.CHROME_PICKER);
-          },
-          children: /*#__PURE__*/jsx(ColorizeIcon, {
-            className: classNames(classes.icon, _defineProperty({}, classes.iconActive, pickMode === COLOR_PICK_MODE.CHROME_PICKER)),
-            fontSize: "small"
-          })
-        })
-      })]
-    })]
-  });
-});
-PaletteChromePicker.propTypes = {
-  color: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onSizeChange: PropTypes.func.isRequired,
-  enableTransparencyPalette: PropTypes.bool.isRequired
-};
-
-export default PaletteChromePicker;
-//# sourceMappingURL=PaletteChromePicker.js.map
+import o from"@babel/runtime/helpers/defineProperty";import e from"@babel/runtime/helpers/slicedToArray";import{forwardRef as r,useState as i,useLayoutEffect as t}from"react";import{ChromePicker as n}from"react-color";import a from"classnames";import l from"prop-types";import{makeStyles as c,Tooltip as p,IconButton as d}from"@material-ui/core";import s from"@material-ui/icons/Palette";import m from"@material-ui/icons/Colorize";import b from"./Palette/Palette.js";import{jsxs as f,jsx as u}from"react/jsx-runtime";var h="PALETTE",x="CHROME_PICKER",g={default:{picker:{width:"100%",boxShadow:"none"},body:{backgroundColor:"#3b3b3b",padding:"16px 16px 0"},color:{width:"32px",height:"32px",marginRight:"16px",borderRadius:"2px"},swatch:{marginTop:0,width:"100%",height:"100%",borderRadius:0,position:"relative",overflow:"hidden"},toggles:{display:"flex",flexDirection:"column",justifyContent:"space-between"},Alpha:{checkboard:{display:"none"},gradient:{borderRadius:"5px"}}}},C=c({container:{backgroundColor:"#3b3b3b",boxShadow:"0px 3px 10px rgba(0, 0, 0, 0.4)",width:"250px",paddingBottom:"8px",borderRadius:"4px","& input":{border:"1px solid #616161 !important",backgroundColor:"#3b3b3b",color:"#fff !important",boxShadow:"none !important",outline:"none"},"& svg:not(.MuiSvgIcon-root)":{fill:"#bdbdbd !important"}},chomePickerPalette:{margin:"0 8px",paddingTop:"8px"},buttonsContainer:{display:"flex",justifyContent:"center",marginTop:"8px"},iconButton:{padding:"8px","&:hover":{backgroundColor:"#333333"},"&:hover $icon":{color:"#fff"}},icon:{color:"#bdbdbd",fontSize:"24px"},iconActive:{color:"#fff"},tooltip:{background:"#414141",color:"#fff",boxShadow:"0px 4px 4px rgba(0, 0, 0, 0.12)",borderRadius:"4px",opacity:1,fontSize:"11px"}}),y=r((function(r,l){var c=r.color,y=r.onChange,P=r.onSizeChange,v=r.enableTransparencyPalette,k=C(),w=i(h),R=e(w,2),S=R[0],T=R[1];return t(P,[S]),f("div",{className:k.container,ref:l,children:[S===h&&u(b,{className:k.chomePickerPalette,color:c,onChange:y,enableTransparencyPalette:v}),S===x&&u(n,{styles:g,color:c,onChange:y}),f("div",{className:k.buttonsContainer,children:[u(p,{title:"Palette",classes:{tooltip:k.tooltip},children:u(d,{className:k.iconButton,onClick:function(){return T(h)},children:u(s,{className:a(k.icon,o({},k.iconActive,S===h)),fontSize:"small"})})}),u(p,{title:"Pick your own",classes:{tooltip:k.tooltip},children:u(d,{className:k.iconButton,onClick:function(){return T(x)},children:u(m,{className:a(k.icon,o({},k.iconActive,S===x)),fontSize:"small"})})})]})]})}));y.propTypes={color:l.string.isRequired,onChange:l.func.isRequired,onSizeChange:l.func.isRequired,enableTransparencyPalette:l.bool.isRequired};export{y as default};

package/components/Comment/CommentIcon/BadgeIcon.js

@@ -1,25 +1 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { memo } from 'react';
-
-function BadgeIcon() {
-  return /*#__PURE__*/jsxs("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/jsx("path", {
-      d: "M13.0997 14.0765L13.1233 14.0918L13.1484 14.1043C13.1626 14.1114 13.1765 14.1192 13.1989 14.1321C13.2006 14.1331 13.2025 14.1342 13.2045 14.1354C13.224 14.1467 13.257 14.1657 13.2912 14.1829C13.3832 14.2288 13.503 14.2714 13.6577 14.2714C13.6609 14.2714 13.6644 14.2714 13.668 14.2714C13.7169 14.2715 13.7976 14.2716 13.8828 14.2574C13.9865 14.2401 14.0774 14.2063 14.167 14.1614L14.1949 14.1475L14.2208 14.1303C14.5074 13.9391 14.7291 13.6225 14.7291 13.1999V4.91423C14.7291 3.15237 13.3053 1.72852 11.5434 1.72852H4.40056C2.6387 1.72852 1.21484 3.15237 1.21484 4.91423V8.85709C1.21484 10.6189 2.6387 12.0428 4.40056 12.0428H9.96679L13.0997 14.0765Z",
-      fill: "#03BCD4",
-      stroke: "#212121"
-    }), /*#__PURE__*/jsx("path", {
-      d: "M10.4 7.6H8.6V9.4C8.6 9.73 8.33 10 8 10C7.67 10 7.4 9.73 7.4 9.4V7.6H5.6C5.27 7.6 5 7.33 5 7C5 6.67 5.27 6.4 5.6 6.4H7.4V4.6C7.4 4.27 7.67 4 8 4C8.33 4 8.6 4.27 8.6 4.6V6.4H10.4C10.73 6.4 11 6.67 11 7C11 7.33 10.73 7.6 10.4 7.6Z",
-      fill: "#212121"
-    })]
-  });
-}
-
-var BadgeIcon$1 = memo(BadgeIcon);
-
-export default BadgeIcon$1;
-//# sourceMappingURL=BadgeIcon.js.map
+import{memo as C}from"react";import{jsxs as t,jsx as r}from"react/jsx-runtime";var e=C((function(){return t("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r("path",{d:"M13.0997 14.0765L13.1233 14.0918L13.1484 14.1043C13.1626 14.1114 13.1765 14.1192 13.1989 14.1321C13.2006 14.1331 13.2025 14.1342 13.2045 14.1354C13.224 14.1467 13.257 14.1657 13.2912 14.1829C13.3832 14.2288 13.503 14.2714 13.6577 14.2714C13.6609 14.2714 13.6644 14.2714 13.668 14.2714C13.7169 14.2715 13.7976 14.2716 13.8828 14.2574C13.9865 14.2401 14.0774 14.2063 14.167 14.1614L14.1949 14.1475L14.2208 14.1303C14.5074 13.9391 14.7291 13.6225 14.7291 13.1999V4.91423C14.7291 3.15237 13.3053 1.72852 11.5434 1.72852H4.40056C2.6387 1.72852 1.21484 3.15237 1.21484 4.91423V8.85709C1.21484 10.6189 2.6387 12.0428 4.40056 12.0428H9.96679L13.0997 14.0765Z",fill:"#03BCD4",stroke:"#212121"}),r("path",{d:"M10.4 7.6H8.6V9.4C8.6 9.73 8.33 10 8 10C7.67 10 7.4 9.73 7.4 9.4V7.6H5.6C5.27 7.6 5 7.33 5 7C5 6.67 5.27 6.4 5.6 6.4H7.4V4.6C7.4 4.27 7.67 4 8 4C8.33 4 8.6 4.27 8.6 4.6V6.4H10.4C10.73 6.4 11 6.67 11 7C11 7.33 10.73 7.6 10.4 7.6Z",fill:"#212121"})]})}));export{e as default};

package/components/Comment/CommentIcon/index.js

@@ -1,82 +1 @@
-import { jsx } from 'react/jsx-runtime';
-import { makeStyles, Tooltip, IconButton, Badge } from '@material-ui/core';
-import PropTypes from 'prop-types';
-import Avatar from '../../Avatar/index.js';
-import BadgeIcon from './BadgeIcon.js';
-
-var useStyles = makeStyles(function (theme) {
-  return {
-    icon: {
-      padding: 0,
-      '&:hover': {
-        '& .MuiBadge-root .MuiBadge-badge svg path': {
-          '&:first-of-type': {
-            fill: theme.palette.primary.light
-          }
-        },
-        '& .MuiAvatar-root': {
-          outline: "1px solid ".concat(theme.palette.primary.light)
-        }
-      },
-      marginTop: 4
-    },
-    badge: {
-      top: 2,
-      right: 6,
-      '&:hover': {
-        '& svg path': {
-          '&:first-of-type': {
-            fill: theme.palette.primary.light
-          }
-        }
-      }
-    },
-    tooltip: {
-      marginTop: 8
-    }
-  };
-});
-
-var CommentIcon = function CommentIcon(_ref) {
-  var displayName = _ref.displayName,
-      imgSrc = _ref.imgSrc,
-      size = _ref.size;
-  var classes = useStyles();
-  return /*#__PURE__*/jsx(Tooltip, {
-    title: "Comment",
-    placement: "bottom",
-    classes: {
-      tooltip: classes.tooltip
-    },
-    children: /*#__PURE__*/jsx(IconButton, {
-      classes: {
-        root: classes.icon
-      },
-      children: /*#__PURE__*/jsx(Badge, {
-        classes: {
-          badge: classes.badge
-        },
-        badgeContent: /*#__PURE__*/jsx(BadgeIcon, {}),
-        children: /*#__PURE__*/jsx(Avatar, {
-          displayName: displayName,
-          size: size,
-          imgSrc: imgSrc
-        })
-      })
-    })
-  });
-};
-
-CommentIcon.propTypes = {
-  displayName: PropTypes.string,
-  imgSrc: PropTypes.string,
-  size: PropTypes.number
-};
-CommentIcon.defaultProps = {
-  displayName: false,
-  imgSrc: undefined,
-  size: 24
-};
-
-export default CommentIcon;
-//# sourceMappingURL=index.js.map
+import t from"prop-types";import{makeStyles as i,Tooltip as r,IconButton as e,Badge as o}from"@material-ui/core";import a from"../../Avatar/index.js";import p from"./BadgeIcon.js";import{jsx as s}from"react/jsx-runtime";var l=i((function(t){return{icon:{padding:0,"&:hover":{"& .MuiBadge-root .MuiBadge-badge svg path":{"&:first-of-type":{fill:t.palette.primary.light}},"& .MuiAvatar-root":{outline:"1px solid ".concat(t.palette.primary.light)}},marginTop:4},badge:{top:2,right:6,"&:hover":{"& svg path":{"&:first-of-type":{fill:t.palette.primary.light}}}},tooltip:{marginTop:8}}})),m=function(t){var i=t.displayName,m=t.imgSrc,n=t.size,g=l();return s(r,{title:"Comment",placement:"bottom",classes:{tooltip:g.tooltip},children:s(e,{classes:{root:g.icon},children:s(o,{classes:{badge:g.badge},badgeContent:s(p,{}),children:s(a,{displayName:i,size:n,imgSrc:m})})})})};m.propTypes={displayName:t.string,imgSrc:t.string,size:t.number},m.defaultProps={displayName:!1,imgSrc:void 0,size:24};export{m as default};