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

package/components/ColorPicker/PaletteChromePicker/PaletteChromePicker.js

@@ -1 +1,185 @@
-import o from"@babel/runtime/helpers/defineProperty";import e from"@babel/runtime/helpers/slicedToArray";import{forwardRef as t,useState as r,useLayoutEffect as i}from"react";import{ChromePicker as n}from"react-color";import a from"classnames";import{makeStyles as l,Tooltip as c,IconButton as p}from"@material-ui/core";import d from"@material-ui/icons/Palette";import s from"@material-ui/icons/Colorize";import m from"./Palette/Palette.js";import{jsxs as b,jsx as f}from"react/jsx-runtime";var u="PALETTE",h="CHROME_PICKER",x={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"}}}},g=l({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"}},chromePickerPalette:{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"}}),C=t((function(t,l){var C=t.color,P=t.onChange,k=t.onSizeChange,v=t.enableTransparencyPalette,w=g(),y=r(u),S=e(y,2),R=S[0],T=S[1];return i(k,[R]),b("div",{className:w.container,ref:l,children:[R===u&&f(m,{className:w.chromePickerPalette,color:C,onChange:P,enableTransparencyPalette:v}),R===h&&f(n,{styles:x,color:C,onChange:P}),b("div",{className:w.buttonsContainer,children:[f(c,{title:"Palette",classes:{tooltip:w.tooltip},children:f(p,{"data-testid":"".concat("PaletteChromePicker","_palette"),className:w.iconButton,onClick:function(){return T(u)},children:f(d,{className:a(w.icon,o({},w.iconActive,R===u)),fontSize:"small"})})}),f(c,{title:"Pick your own",classes:{tooltip:w.tooltip},children:f(p,{"data-testid":"".concat("PaletteChromePicker","_pickOwn"),className:w.iconButton,onClick:function(){return T(h)},children:f(s,{className:a(w.icon,o({},w.iconActive,R===h)),fontSize:"small"})})})]})]})}));export{C as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { forwardRef, useState, useLayoutEffect } from 'react';
+import { ChromePicker } from 'react-color';
+import classNames from 'classnames';
+import { makeStyles, Tooltip, IconButton } from '@material-ui/core';
+import PaletteIcon from '@material-ui/icons/Palette';
+import ColorizeIcon from '@material-ui/icons/Colorize';
+import Palette from './Palette/Palette.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PAGE_NAME = 'PaletteChromePicker';
+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'
+    }
+  },
+  chromePickerPalette: {
+    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'
+  }
+});
+
+/**
+ * @typedef PaletteChromePickerProps
+ * @property {string} color
+ * @property {(color: { hex: string; hsl: any; rgb: any; }) => void} onChange
+ * @property {() => void} [onSizeChange]
+ * @property {boolean} [enableTransparencyPalette]
+ */
+
+var PaletteChromePicker = forwardRef(
+/**
+ * @param {PaletteChromePickerProps} props
+ * @param ref
+ */
+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.chromePickerPalette,
+      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, {
+          "data-testid": "".concat(PAGE_NAME, "_palette"),
+          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, {
+          "data-testid": "".concat(PAGE_NAME, "_pickOwn"),
+          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"
+          })
+        })
+      })]
+    })]
+  });
+});
+
+export { PaletteChromePicker as default };
+//# sourceMappingURL=PaletteChromePicker.js.map

package/components/ColorPicker/PaletteChromePicker/PaletteChromePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaletteChromePicker.js","sources":["../../../../src/components/ColorPicker/PaletteChromePicker/PaletteChromePicker.js"],"sourcesContent":["import { useState, useLayoutEffect, forwardRef } from 'react';\nimport { ChromePicker } from 'react-color';\nimport classNames from 'classnames';\n\nimport { makeStyles, IconButton, Tooltip } from '@material-ui/core';\nimport PaletteIcon from '@material-ui/icons/Palette';\nimport ColorizeIcon from '@material-ui/icons/Colorize';\n\nimport Palette from './Palette';\n\nconst PAGE_NAME = 'PaletteChromePicker';\n\nconst COLOR_PICK_MODE = {\n  PALETTE: 'PALETTE',\n  CHROME_PICKER: 'CHROME_PICKER',\n};\n\nconst chromePickerStyles = {\n  default: {\n    picker: {\n      width: '100%',\n      boxShadow: 'none',\n    },\n    body: {\n      backgroundColor: '#3b3b3b',\n      padding: '16px 16px 0',\n    },\n    color: {\n      width: '32px',\n      height: '32px',\n      marginRight: '16px',\n      borderRadius: '2px',\n    },\n    swatch: {\n      marginTop: 0,\n      width: '100%',\n      height: '100%',\n      borderRadius: 0,\n      position: 'relative',\n      overflow: 'hidden',\n    },\n    toggles: {\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n    },\n    Alpha: {\n      checkboard: {\n        display: 'none',\n      },\n      gradient: {\n        borderRadius: '5px',\n      },\n    },\n  },\n};\n\nconst useStyles = makeStyles({\n  container: {\n    backgroundColor: '#3b3b3b',\n    boxShadow: '0px 3px 10px rgba(0, 0, 0, 0.4)',\n    width: '250px',\n    paddingBottom: '8px',\n    borderRadius: '4px',\n\n    '& input': {\n      border: '1px solid #616161 !important',\n      backgroundColor: '#3b3b3b',\n      color: '#fff !important',\n      boxShadow: 'none !important',\n      outline: 'none',\n    },\n\n    '& svg:not(.MuiSvgIcon-root)': {\n      fill: '#bdbdbd !important',\n    },\n  },\n  chromePickerPalette: {\n    margin: '0 8px',\n    paddingTop: '8px',\n  },\n  buttonsContainer: {\n    display: 'flex',\n    justifyContent: 'center',\n    marginTop: '8px',\n  },\n  iconButton: {\n    padding: '8px',\n    '&:hover': {\n      backgroundColor: '#333333',\n    },\n    '&:hover $icon': {\n      color: '#fff',\n    },\n  },\n  icon: { color: '#bdbdbd', fontSize: '24px' },\n  iconActive: { color: '#fff' },\n  tooltip: {\n    background: '#414141',\n    color: '#fff',\n    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.12)',\n    borderRadius: '4px',\n    opacity: 1,\n    fontSize: '11px',\n  },\n});\n\n/**\n * @typedef PaletteChromePickerProps\n * @property {string} color\n * @property {(color: { hex: string; hsl: any; rgb: any; }) => void} onChange\n * @property {() => void} [onSizeChange]\n * @property {boolean} [enableTransparencyPalette]\n */\n\nconst PaletteChromePicker = forwardRef(\n  /**\n   * @param {PaletteChromePickerProps} props\n   * @param ref\n   */\n  ({ color, onChange, onSizeChange, enableTransparencyPalette }, ref) => {\n    const classes = useStyles();\n    const [pickMode, setPickMode] = useState(COLOR_PICK_MODE.PALETTE);\n\n    useLayoutEffect(onSizeChange, [pickMode]);\n\n    return (\n      <div className={classes.container} ref={ref}>\n        {pickMode === COLOR_PICK_MODE.PALETTE && (\n          <Palette\n            className={classes.chromePickerPalette}\n            color={color}\n            onChange={onChange}\n            enableTransparencyPalette={enableTransparencyPalette}\n          />\n        )}\n        {pickMode === COLOR_PICK_MODE.CHROME_PICKER && (\n          <ChromePicker styles={chromePickerStyles} color={color} onChange={onChange} />\n        )}\n        <div className={classes.buttonsContainer}>\n          <Tooltip title=\"Palette\" classes={{ tooltip: classes.tooltip }}>\n            <IconButton\n              data-testid={`${PAGE_NAME}_palette`}\n              className={classes.iconButton}\n              onClick={() => setPickMode(COLOR_PICK_MODE.PALETTE)}\n            >\n              <PaletteIcon\n                className={classNames(classes.icon, {\n                  [classes.iconActive]: pickMode === COLOR_PICK_MODE.PALETTE,\n                })}\n                fontSize=\"small\"\n              />\n            </IconButton>\n          </Tooltip>\n          <Tooltip title=\"Pick your own\" classes={{ tooltip: classes.tooltip }}>\n            <IconButton\n              data-testid={`${PAGE_NAME}_pickOwn`}\n              className={classes.iconButton}\n              onClick={() => setPickMode(COLOR_PICK_MODE.CHROME_PICKER)}\n            >\n              <ColorizeIcon\n                className={classNames(classes.icon, {\n                  [classes.iconActive]: pickMode === COLOR_PICK_MODE.CHROME_PICKER,\n                })}\n                fontSize=\"small\"\n              />\n            </IconButton>\n          </Tooltip>\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default PaletteChromePicker;\n"],"names":["PAGE_NAME","COLOR_PICK_MODE","PALETTE","CHROME_PICKER","chromePickerStyles","default","picker","width","boxShadow","body","backgroundColor","padding","color","height","marginRight","borderRadius","swatch","marginTop","position","overflow","toggles","display","flexDirection","justifyContent","Alpha","checkboard","gradient","useStyles","makeStyles","container","paddingBottom","border","outline","fill","chromePickerPalette","margin","paddingTop","buttonsContainer","iconButton","icon","fontSize","iconActive","tooltip","background","opacity","PaletteChromePicker","forwardRef","ref","onChange","onSizeChange","enableTransparencyPalette","classes","useState","pickMode","setPickMode","useLayoutEffect","_jsxs","_jsx","classNames"],"mappings":"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"}

package/components/ColorPickerPalette/ColorPickerPalette.js

@@ -1 +1,100 @@
-import{__assign as r}from'./../../ext-esm/tslib/tslib.es6.js';import{jsx as o}from"react/jsx-runtime";import{useRef as e}from"react";import{withStyles as n,Popover as t}from"@material-ui/core";import a from"../ColorPicker/PaletteChromePicker/PaletteChromePicker.js";var i={rgba:function(r){return"rgba(".concat(r.rgb.r,", ").concat(r.rgb.g,", ").concat(r.rgb.b,", ").concat(r.rgb.a,")")},rgb:function(r){return"rgb(".concat(r.rgb.r,", ").concat(r.rgb.g,", ").concat(r.rgb.b,")")},hex:function(r){return r.hex},rgba_rgb:function(r){return 1===r.rgb.a?i.rgb(r):i.rgba(r)},rgba_hex:function(r){return 1===r.rgb.a?i.hex(r):i.rgba(r)}},c=function(n){var a=n.color,c=n.onChange,l=n.anchorEl,p=n.handleClose,g=n.converter,b=n.popoverAnchorOrigin,s=n.popoverTransformOrigin,m=n.pickerComponent,f=n.classes,h=n.enableTransparencyPalette,u=e();return o("div",r({className:f.root},{children:o(t,r({id:"colors-popper",action:u,open:Boolean(l),anchorEl:l,onClose:p,anchorOrigin:b,transformOrigin:s},{children:o(m,{color:a,onChange:function(r){var o=i[g](r);c(o)},onSizeChange:function(){u.current&&u.current.updatePosition()},enableTransparencyPalette:h})}))}))};c.defaultProps={converter:"rgba_hex",pickerComponent:a,popoverAnchorOrigin:{vertical:"bottom",horizontal:"left"},popoverTransformOrigin:{vertical:"top",horizontal:"left"},enableTransparencyPalette:!1,anchorEl:null};var l=n({root:{position:"relative",display:"flex"},popper:{zIndex:1500},topLabel:{marginBottom:"8px",fontSize:"15px",lineHeight:"17px",letterSpacing:"0.4px",color:"#BDBDBD",whiteSpace:"nowrap"},rightLabel:{marginLeft:"8px",fontSize:"16px"}})(c);export{l as default};
+import { useRef } from 'react';
+import { withStyles, Popover } from '@material-ui/core';
+import PaletteChromePicker from '../ColorPicker/PaletteChromePicker/PaletteChromePicker.js';
+import { jsx } from 'react/jsx-runtime';
+
+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 ColorPickerPalette = function ColorPickerPalette(_ref) {
+  var color = _ref.color,
+    onChange = _ref.onChange,
+    anchorEl = _ref.anchorEl,
+    handleClose = _ref.handleClose,
+    converter = _ref.converter,
+    popoverAnchorOrigin = _ref.popoverAnchorOrigin,
+    popoverTransformOrigin = _ref.popoverTransformOrigin,
+    PickerComponent = _ref.pickerComponent,
+    classes = _ref.classes,
+    enableTransparencyPalette = _ref.enableTransparencyPalette;
+  var popperInstanceRef = useRef();
+  var handleChange = function handleChange(nextColor) {
+    var convertedColor = converters[converter](nextColor);
+    onChange(convertedColor);
+  };
+  var updatePopperPosition = function updatePopperPosition() {
+    if (popperInstanceRef.current) {
+      popperInstanceRef.current.updatePosition();
+    }
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: classes.root,
+    children: /*#__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
+      })
+    })
+  });
+};
+ColorPickerPalette.defaultProps = {
+  converter: 'rgba_hex',
+  pickerComponent: PaletteChromePicker,
+  popoverAnchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'left'
+  },
+  popoverTransformOrigin: {
+    vertical: 'top',
+    horizontal: 'left'
+  },
+  enableTransparencyPalette: false,
+  anchorEl: null
+};
+var ColorPickerPalette$1 = withStyles({
+  root: {
+    position: 'relative',
+    display: 'flex'
+  },
+  popper: {
+    zIndex: 1500
+  },
+  topLabel: {
+    marginBottom: '8px',
+    fontSize: '15px',
+    lineHeight: '17px',
+    letterSpacing: '0.4px',
+    color: '#BDBDBD',
+    whiteSpace: 'nowrap'
+  },
+  rightLabel: {
+    marginLeft: '8px',
+    fontSize: '16px'
+  }
+})(ColorPickerPalette);
+
+export { ColorPickerPalette$1 as default };
+//# sourceMappingURL=ColorPickerPalette.js.map

package/components/ColorPickerPalette/ColorPickerPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPalette.js","sources":["../../../src/components/ColorPickerPalette/ColorPickerPalette.tsx"],"sourcesContent":["import { useRef, FC, ElementType } from 'react';\nimport { withStyles, Popover, PopoverActions, PopoverOrigin } from '@material-ui/core';\n\nimport PaletteChromePicker from '../ColorPicker/PaletteChromePicker/PaletteChromePicker';\n\nconst converters = {\n  rgba: c => `rgba(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b}, ${c.rgb.a})`,\n  rgb: c => `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`,\n  hex: c => c.hex,\n  rgba_rgb: c => (c.rgb.a === 1 ? converters.rgb(c) : converters.rgba(c)),\n  rgba_hex: c => (c.rgb.a === 1 ? converters.hex(c) : converters.rgba(c)),\n};\n\ninterface ColorPickerPaletteProps {\n  color: string;\n  onChange: (convertedColor: string) => void;\n  handleClose: () => void;\n  anchorEl?: null | Element | ((element: Element) => Element);\n  converter?: string;\n  popoverAnchorOrigin?: PopoverOrigin;\n  popoverTransformOrigin?: PopoverOrigin;\n  pickerComponent?: ElementType;\n  classes?: { root: string; }\n  enableTransparencyPalette?: boolean;\n}\n\nconst ColorPickerPalette = ({\n  color,\n  onChange,\n  anchorEl,\n  handleClose,\n  converter,\n  popoverAnchorOrigin,\n  popoverTransformOrigin,\n  pickerComponent: PickerComponent,\n  classes,\n  enableTransparencyPalette,\n}: ColorPickerPaletteProps): JSX.Element => {\n  const popperInstanceRef = useRef<PopoverActions>();\n\n  const handleChange = nextColor => {\n    const convertedColor = converters[converter](nextColor);\n    onChange(convertedColor);\n  };\n\n  const updatePopperPosition = () => {\n    if (popperInstanceRef.current) {\n      popperInstanceRef.current.updatePosition();\n    }\n  };\n\n  return (\n    <div className={classes.root}>\n      <Popover\n        id=\"colors-popper\"\n        action={popperInstanceRef}\n        open={Boolean(anchorEl)}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        anchorOrigin={popoverAnchorOrigin}\n        transformOrigin={popoverTransformOrigin}\n      >\n        <PickerComponent\n          color={color}\n          onChange={handleChange}\n          onSizeChange={updatePopperPosition}\n          enableTransparencyPalette={enableTransparencyPalette}\n        />\n      </Popover>\n    </div>\n  );\n};\n\nColorPickerPalette.defaultProps = {\n  converter: 'rgba_hex',\n  pickerComponent: PaletteChromePicker,\n  popoverAnchorOrigin: {\n    vertical: 'bottom',\n    horizontal: 'left',\n  },\n  popoverTransformOrigin: {\n    vertical: 'top',\n    horizontal: 'left',\n  },\n  enableTransparencyPalette: false,\n  anchorEl: null,\n};\n\nexport default withStyles({\n  root: {\n    position: 'relative',\n    display: 'flex',\n  },\n  popper: {\n    zIndex: 1500,\n  },\n  topLabel: {\n    marginBottom: '8px',\n    fontSize: '15px',\n    lineHeight: '17px',\n    letterSpacing: '0.4px',\n    color: '#BDBDBD',\n    whiteSpace: 'nowrap',\n  },\n  rightLabel: {\n    marginLeft: '8px',\n    fontSize: '16px',\n  },\n})(ColorPickerPalette as FC);\n"],"names":["converters","rgba","c","rgb","r","g","b","a","hex","rgba_rgb","rgba_hex","ColorPickerPalette","color","onChange","anchorEl","handleClose","converter","popoverAnchorOrigin","popoverTransformOrigin","PickerComponent","pickerComponent","classes","enableTransparencyPalette","popperInstanceRef","useRef","handleChange","nextColor","convertedColor","updatePopperPosition","current","updatePosition","_jsx","root","Boolean","defaultProps","PaletteChromePicker","vertical","horizontal","withStyles","position","display","popper","zIndex","topLabel","marginBottom","fontSize","lineHeight","letterSpacing","whiteSpace","rightLabel","marginLeft"],"mappings":"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"}

package/components/Comment/CommentIcon/BadgeIcon.js

@@ -1 +1,24 @@
-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};
+import { memo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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 { BadgeIcon$1 as default };
+//# sourceMappingURL=BadgeIcon.js.map

package/components/Comment/CommentIcon/BadgeIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeIcon.js","sources":["../../../../src/components/Comment/CommentIcon/BadgeIcon.js"],"sourcesContent":["import { memo } from 'react';\n\nfunction BadgeIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        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\"\n        fill=\"#03BCD4\"\n        stroke=\"#212121\"\n      />\n      <path\n        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\"\n        fill=\"#212121\"\n      />\n    </svg>\n  );\n}\n\nexport default memo(BadgeIcon);\n"],"names":["BadgeIcon","_jsxs","_jsx","memo"],"mappings":";;;AAEA,SAASA,SAAS,GAAG;EACnB,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,KAAK,EAAC,IAAI;AAAC,IAAA,MAAM,EAAC,IAAI;AAAC,IAAA,OAAO,EAAC,WAAW;AAAC,IAAA,IAAI,EAAC,MAAM;AAAC,IAAA,KAAK,EAAC,4BAA4B;IAAA,QAC5F,EAAA,cAAAC,GAAA,CAAA,MAAA,EAAA;AACE,MAAA,CAAC,EAAC,4oBAA4oB;AAC9oB,MAAA,IAAI,EAAC,SAAS;AACd,MAAA,MAAM,EAAC,SAAA;AAAS,KAAA,CAChB,eACFA,GAAA,CAAA,MAAA,EAAA;AACE,MAAA,CAAC,EAAC,sOAAsO;AACxO,MAAA,IAAI,EAAC,SAAA;KACL,CAAA,CAAA;GACE,CAAA,CAAA;AAEV,CAAA;AAEA,kBAAeC,IAAI,CAACH,SAAS,CAAC;;;;"}

package/components/Comment/CommentIcon/index.js

@@ -1 +1,83 @@
-import{__assign as t}from'./../../../ext-esm/tslib/tslib.es6.js';import{jsx as i}from"react/jsx-runtime";import e from"prop-types";import{makeStyles as r,Tooltip as o,IconButton as a,Badge as p}from"@material-ui/core";import{isNativeDetected as s,isMobileDetected as m}from"../../../utils/mobileDetect.js";import l from"../../Avatar/index.js";import n from"./BadgeIcon.js";var d=s||m,g=r((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}}})),c=function(e){var r=e.displayName,s=e.imgSrc,m=e.size,c=g();return i(o,t({title:!d&&"Add Comment",placement:"bottom",classes:{tooltip:c.tooltip}},{children:i(a,t({classes:{root:c.icon}},{children:i(p,t({classes:{badge:c.badge},badgeContent:i(n,{})},{children:i(l,{displayName:r,size:m,imgSrc:s})}))}))}))},f={displayName:e.string,imgSrc:e.string,size:e.number};c.propTypes=f,c.defaultProps={displayName:"",imgSrc:void 0,size:24};export{c as default};
+import PropTypes from 'prop-types';
+import { makeStyles, Tooltip, IconButton, Badge } from '@material-ui/core';
+import { isNativeDetected, isMobileDetected } from '../../../utils/mobileDetect.js';
+import Avatar from '../../Avatar/index.js';
+import BadgeIcon from './BadgeIcon.js';
+import { jsx } from 'react/jsx-runtime';
+
+var isMobileView = isNativeDetected || isMobileDetected;
+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: !isMobileView && "Add 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
+        })
+      })
+    })
+  });
+};
+var commentIconProps = {
+  displayName: PropTypes.string,
+  imgSrc: PropTypes.string,
+  size: PropTypes.number
+};
+CommentIcon.propTypes = commentIconProps;
+CommentIcon.defaultProps = {
+  displayName: '',
+  imgSrc: undefined,
+  size: 24
+};
+
+export { CommentIcon as default };
+//# sourceMappingURL=index.js.map

package/components/Comment/CommentIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Comment/CommentIcon/index.tsx"],"sourcesContent":["import PropTypes from 'prop-types';\n\nimport { Badge, IconButton, Tooltip, makeStyles } from '@material-ui/core';\nimport { isNativeDetected, isMobileDetected } from '~/utils/mobileDetect';\n\nimport Avatar from '../../Avatar';\n\nimport BadgeIcon from './BadgeIcon';\n\nconst isMobileView = isNativeDetected || isMobileDetected;\n\nconst useStyles = makeStyles(theme => ({\n  icon: {\n    padding: 0,\n    '&:hover': {\n      '& .MuiBadge-root .MuiBadge-badge svg path': {\n        '&:first-of-type': { fill: theme.palette.primary.light },\n      },\n      '& .MuiAvatar-root': {\n        outline: `1px solid ${theme.palette.primary.light}`,\n      },\n    },\n    marginTop: 4,\n  },\n  badge: {\n    top: 2,\n    right: 6,\n    '&:hover': {\n      '& svg path': { '&:first-of-type': { fill: theme.palette.primary.light } },\n    },\n  },\n  tooltip: {\n    marginTop: 8,\n  },\n}));\n\ninterface CommentIconProps extends PropTypes.InferProps<typeof commentIconProps> {}\n\nconst CommentIcon = ({ displayName, imgSrc, size }: CommentIconProps): JSX.Element => {\n  const classes = useStyles();\n\n  return (\n    <Tooltip title={!isMobileView && \"Add Comment\"} placement=\"bottom\" classes={{ tooltip: classes.tooltip }}>\n      <IconButton classes={{ root: classes.icon }}>\n        <Badge classes={{ badge: classes.badge }} badgeContent={<BadgeIcon />}>\n          <Avatar displayName={displayName} size={size} imgSrc={imgSrc} />\n        </Badge>\n      </IconButton>\n    </Tooltip>\n  );\n};\n\nconst commentIconProps = {\n  displayName: PropTypes.string,\n  imgSrc: PropTypes.string,\n  size: PropTypes.number,\n};\n\nCommentIcon.propTypes = commentIconProps;\n\nCommentIcon.defaultProps = {\n  displayName: '',\n  imgSrc: undefined,\n  size: 24,\n};\n\nexport default CommentIcon;\n"],"names":["isMobileView","isNativeDetected","isMobileDetected","useStyles","makeStyles","theme","icon","padding","fill","palette","primary","light","outline","marginTop","badge","top","right","tooltip","CommentIcon","displayName","imgSrc","size","classes","_jsx","root","commentIconProps","PropTypes","string","number","propTypes","defaultProps","undefined"],"mappings":";;;;;;;AASA,IAAMA,YAAY,GAAGC,gBAAgB,IAAIC,gBAAgB,CAAA;AAEzD,IAAMC,SAAS,GAAGC,UAAU,CAAC,UAAAC,KAAK,EAAA;EAAA,OAAK;AACrCC,IAAAA,IAAI,EAAE;AACJC,MAAAA,OAAO,EAAE,CAAC;AACV,MAAA,SAAS,EAAE;AACT,QAAA,2CAA2C,EAAE;AAC3C,UAAA,iBAAiB,EAAE;AAAEC,YAAAA,IAAI,EAAEH,KAAK,CAACI,OAAO,CAACC,OAAO,CAACC,KAAAA;AAAM,WAAA;SACxD;AACD,QAAA,mBAAmB,EAAE;AACnBC,UAAAA,OAAO,sBAAeP,KAAK,CAACI,OAAO,CAACC,OAAO,CAACC,KAAK,CAAA;AACnD,SAAA;OACD;AACDE,MAAAA,SAAS,EAAE,CAAA;KACZ;AACDC,IAAAA,KAAK,EAAE;AACLC,MAAAA,GAAG,EAAE,CAAC;AACNC,MAAAA,KAAK,EAAE,CAAC;AACR,MAAA,SAAS,EAAE;AACT,QAAA,YAAY,EAAE;AAAE,UAAA,iBAAiB,EAAE;AAAER,YAAAA,IAAI,EAAEH,KAAK,CAACI,OAAO,CAACC,OAAO,CAACC,KAAAA;AAAM,WAAA;AAAE,SAAA;AAC3E,OAAA;KACD;AACDM,IAAAA,OAAO,EAAE;AACPJ,MAAAA,SAAS,EAAE,CAAA;AACb,KAAA;GACD,CAAA;AAAA,CAAC,CAAC,CAAA;AAIH,IAAMK,WAAW,GAAG,SAAdA,WAAW,CAAqE,IAAA,EAAA;EAAA,IAA/DC,WAAW,QAAXA,WAAW;AAAEC,IAAAA,MAAM,QAANA,MAAM;AAAEC,IAAAA,IAAI,QAAJA,IAAI,CAAA;EAC9C,IAAMC,OAAO,GAAGnB,SAAS,EAAE,CAAA;AAE3B,EAAA,oBACEoB,IAAC,OAAO,EAAA;AAAC,IAAA,KAAK,EAAE,CAACvB,YAAY,IAAI,aAAc;AAAC,IAAA,SAAS,EAAC,QAAQ;AAAC,IAAA,OAAO,EAAE;MAAEiB,OAAO,EAAEK,OAAO,CAACL,OAAAA;KAAU;AAAA,IAAA,QAAA,eACvGM,IAAC,UAAU,EAAA;AAAC,MAAA,OAAO,EAAE;QAAEC,IAAI,EAAEF,OAAO,CAAChB,IAAAA;OAAO;AAAA,MAAA,QAAA,eAC1CiB,IAAC,KAAK,EAAA;AAAC,QAAA,OAAO,EAAE;UAAET,KAAK,EAAEQ,OAAO,CAACR,KAAAA;SAAQ;QAAC,YAAY,eAAES,GAAC,CAAA,SAAS,EAAI,EAAA,CAAA;AAAA,QAAA,QAAA,eACpEA,IAAC,MAAM,EAAA;AAAC,UAAA,WAAW,EAAEJ,WAAY;AAAC,UAAA,IAAI,EAAEE,IAAK;AAAC,UAAA,MAAM,EAAED,MAAAA;AAAO,SAAA,CAAA;AAAG,OAAA,CAAA;AAC1D,KAAA,CAAA;GAEF,CAAA,CAAA;AAEd,EAAC;AAED,IAAMK,gBAAgB,GAAG;EACvBN,WAAW,EAAEO,SAAS,CAACC,MAAM;EAC7BP,MAAM,EAAEM,SAAS,CAACC,MAAM;EACxBN,IAAI,EAAEK,SAAS,CAACE,MAAAA;AAClB,CAAC,CAAA;AAEDV,WAAW,CAACW,SAAS,GAAGJ,gBAAgB,CAAA;AAExCP,WAAW,CAACY,YAAY,GAAG;AACzBX,EAAAA,WAAW,EAAE,EAAE;AACfC,EAAAA,MAAM,EAAEW,SAAS;AACjBV,EAAAA,IAAI,EAAE,EAAA;AACR,CAAC;;;;"}