@corva/ui 0.34.0-rc.2 → 0.34.0-rc.3

package/components/ColorPicker/ColorPicker.js

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

package/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sources":["../../../src/components/ColorPicker/ColorPicker.js"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles, Popover, InputLabel, IconButton } from '@material-ui/core';\nimport { ColorLens as ColorLensIcon } from '@material-ui/icons';\nimport chroma from 'chroma-js';\nimport classNames from 'classnames';\n\nimport Checkboard from '~/assets/checkboard.svg';\n\nimport PaletteChromePicker from './PaletteChromePicker';\n\nconst muiStyles = {\n  root: {\n    position: 'relative',\n    display: 'flex',\n  },\n  topLabelRoot: {\n    flexDirection: 'column',\n  },\n  rightLabelRoot: {\n    flexDirection: 'row-reverse',\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n  },\n  button: {\n    width: '36px',\n    height: '24px',\n    boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.161)',\n    borderRadius: '5px',\n  },\n  buttonTransparrent: {\n    position: 'relative',\n    backgroundImage: `url(${Checkboard})`,\n    backgroundSize: 'cover',\n    backgroundPosition: 'center',\n\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      display: 'block',\n      width: '100%',\n      height: '3px',\n      background: '#FF0000',\n      transform: 'rotate(148deg)',\n      borderRadius: '2px',\n    },\n  },\n  colorLensIcon: {\n    position: 'relative',\n    zIndex: 2,\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};\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\nconst ColorPicker = ({\n  label,\n  value,\n  converter,\n  onChange,\n  buttonClassName,\n  popoverAnchorOrigin,\n  popoverTransformOrigin,\n  labelPosition,\n  hideLabel,\n  pickerComponent: PickerComponent,\n  classes,\n  lensColor,\n  enableTransparencyPalette,\n}) => {\n  const [anchorEl, setAnchorEl] = useState(null);\n  const [color, setColor] = useState(value);\n  const popperInstanceRef = useRef();\n\n  useEffect(() => {\n    setColor(value);\n  }, [value]);\n\n  const handleOpen = e => {\n    setAnchorEl(e.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  const handleChange = nextColor => {\n    const convertedColor = converters[converter](nextColor);\n    setColor(convertedColor);\n    onChange(convertedColor);\n  };\n\n  const updatePopperPosition = () => {\n    if (popperInstanceRef.current) {\n      popperInstanceRef.current.updatePosition();\n    }\n  };\n\n  return (\n    <div\n      className={classNames(classes.root, {\n        [classes.topLabelRoot]: labelPosition === 'top',\n        [classes.rightLabelRoot]: labelPosition === 'right',\n      })}\n    >\n      {!hideLabel && (\n        <InputLabel\n          className={classNames({\n            [classes.topLabel]: labelPosition === 'top',\n            [classes.rightLabel]: labelPosition === 'right',\n          })}\n          shrink\n        >\n          {label}\n        </InputLabel>\n      )}\n      <IconButton\n        className={classNames(classes.button, buttonClassName, {\n          [classes.buttonTransparrent]: chroma(color).alpha() === 0,\n        })}\n        disableRipple\n        style={{ backgroundColor: color, color: lensColor }}\n        onClick={handleOpen}\n      >\n        <ColorLensIcon fontSize=\"small\" className={classes.colorLensIcon} />\n      </IconButton>\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\nColorPicker.propTypes = {\n  buttonClassName: PropTypes.string,\n\n  label: PropTypes.string,\n  value: PropTypes.string.isRequired,\n  onChange: PropTypes.func.isRequired,\n  converter: PropTypes.oneOf(Object.keys(converters)),\n\n  classes: PropTypes.shape({\n    button: PropTypes.string.isRequired,\n  }).isRequired,\n  pickerComponent: PropTypes.node,\n\n  labelPosition: PropTypes.oneOf(['top', 'right']),\n  popoverAnchorOrigin: PropTypes.shape({}),\n  popoverTransformOrigin: PropTypes.shape({}),\n\n  hideLabel: PropTypes.bool,\n  lensColor: PropTypes.string,\n\n  enableTransparencyPalette: PropTypes.bool,\n};\n\nColorPicker.defaultProps = {\n  label: 'Color',\n  buttonClassName: null,\n  converter: 'rgba_hex',\n  pickerComponent: PaletteChromePicker,\n  hideLabel: false,\n  popoverAnchorOrigin: {\n    vertical: 'bottom',\n    horizontal: 'left',\n  },\n  popoverTransformOrigin: {\n    vertical: 'top',\n    horizontal: 'left',\n  },\n  labelPosition: 'top',\n  lensColor: '#fff',\n  enableTransparencyPalette: false,\n};\n\nexport default withStyles(muiStyles)(ColorPicker);\n"],"names":["muiStyles","root","position","display","topLabelRoot","flexDirection","rightLabelRoot","justifyContent","alignItems","button","width","height","boxShadow","borderRadius","buttonTransparrent","backgroundImage","Checkboard","backgroundSize","backgroundPosition","content","background","transform","colorLensIcon","zIndex","popper","topLabel","marginBottom","fontSize","lineHeight","letterSpacing","color","whiteSpace","rightLabel","marginLeft","converters","rgba","c","rgb","r","g","b","a","hex","rgba_rgb","rgba_hex","ColorPicker","label","value","converter","onChange","buttonClassName","popoverAnchorOrigin","popoverTransformOrigin","labelPosition","hideLabel","PickerComponent","pickerComponent","classes","lensColor","enableTransparencyPalette","useState","anchorEl","setAnchorEl","setColor","popperInstanceRef","useRef","useEffect","handleOpen","e","currentTarget","handleClose","handleChange","nextColor","convertedColor","updatePopperPosition","current","updatePosition","_jsxs","classNames","_jsx","chroma","alpha","backgroundColor","ColorLensIcon","Boolean","propTypes","PropTypes","string","isRequired","func","oneOf","Object","keys","shape","node","bool","defaultProps","PaletteChromePicker","vertical","horizontal","withStyles"],"mappings":";;;;;;;;;;;;AAWA,IAAMA,SAAS,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,QAAQ,EAAE,UADN;AAEJC,IAAAA,OAAO,EAAE;AAFL,GADU;AAKhBC,EAAAA,YAAY,EAAE;AACZC,IAAAA,aAAa,EAAE;AADH,GALE;AAQhBC,EAAAA,cAAc,EAAE;AACdD,IAAAA,aAAa,EAAE,aADD;AAEdE,IAAAA,cAAc,EAAE,UAFF;AAGdC,IAAAA,UAAU,EAAE;AAHE,GARA;AAahBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,KAAK,EAAE,MADD;AAENC,IAAAA,MAAM,EAAE,MAFF;AAGNC,IAAAA,SAAS,EAAE,kCAHL;AAINC,IAAAA,YAAY,EAAE;AAJR,GAbQ;AAmBhBC,EAAAA,kBAAkB,EAAE;AAClBZ,IAAAA,QAAQ,EAAE,UADQ;AAElBa,IAAAA,eAAe,gBAASC,UAAT,MAFG;AAGlBC,IAAAA,cAAc,EAAE,OAHE;AAIlBC,IAAAA,kBAAkB,EAAE,QAJF;AAMlB,iBAAa;AACXC,MAAAA,OAAO,EAAE,IADE;AAEXjB,MAAAA,QAAQ,EAAE,UAFC;AAGXC,MAAAA,OAAO,EAAE,OAHE;AAIXO,MAAAA,KAAK,EAAE,MAJI;AAKXC,MAAAA,MAAM,EAAE,KALG;AAMXS,MAAAA,UAAU,EAAE,SAND;AAOXC,MAAAA,SAAS,EAAE,gBAPA;AAQXR,MAAAA,YAAY,EAAE;AARH;AANK,GAnBJ;AAoChBS,EAAAA,aAAa,EAAE;AACbpB,IAAAA,QAAQ,EAAE,UADG;AAEbqB,IAAAA,MAAM,EAAE;AAFK,GApCC;AAwChBC,EAAAA,MAAM,EAAE;AACND,IAAAA,MAAM,EAAE;AADF,GAxCQ;AA2ChBE,EAAAA,QAAQ,EAAE;AACRC,IAAAA,YAAY,EAAE,KADN;AAERC,IAAAA,QAAQ,EAAE,MAFF;AAGRC,IAAAA,UAAU,EAAE,MAHJ;AAIRC,IAAAA,aAAa,EAAE,OAJP;AAKRC,IAAAA,KAAK,EAAE,SALC;AAMRC,IAAAA,UAAU,EAAE;AANJ,GA3CM;AAmDhBC,EAAAA,UAAU,EAAE;AACVC,IAAAA,UAAU,EAAE,KADF;AAEVN,IAAAA,QAAQ,EAAE;AAFA;AAnDI,CAAlB;AAyDA,IAAMO,UAAU,GAAG;AACjBC,EAAAA,IAAI,EAAE,cAAAC,CAAC;AAAA,0BAAYA,CAAC,CAACC,GAAF,CAAMC,CAAlB,eAAwBF,CAAC,CAACC,GAAF,CAAME,CAA9B,eAAoCH,CAAC,CAACC,GAAF,CAAMG,CAA1C,eAAgDJ,CAAC,CAACC,GAAF,CAAMI,CAAtD;AAAA,GADU;AAEjBJ,EAAAA,GAAG,EAAE,aAAAD,CAAC;AAAA,yBAAWA,CAAC,CAACC,GAAF,CAAMC,CAAjB,eAAuBF,CAAC,CAACC,GAAF,CAAME,CAA7B,eAAmCH,CAAC,CAACC,GAAF,CAAMG,CAAzC;AAAA,GAFW;AAGjBE,EAAAA,GAAG,EAAE,aAAAN,CAAC;AAAA,WAAIA,CAAC,CAACM,GAAN;AAAA,GAHW;AAIjBC,EAAAA,QAAQ,EAAE,kBAAAP,CAAC;AAAA,WAAKA,CAAC,CAACC,GAAF,CAAMI,CAAN,KAAY,CAAZ,GAAgBP,UAAU,CAACG,GAAX,CAAeD,CAAf,CAAhB,GAAoCF,UAAU,CAACC,IAAX,CAAgBC,CAAhB,CAAzC;AAAA,GAJM;AAKjBQ,EAAAA,QAAQ,EAAE,kBAAAR,CAAC;AAAA,WAAKA,CAAC,CAACC,GAAF,CAAMI,CAAN,KAAY,CAAZ,GAAgBP,UAAU,CAACQ,GAAX,CAAeN,CAAf,CAAhB,GAAoCF,UAAU,CAACC,IAAX,CAAgBC,CAAhB,CAAzC;AAAA;AALM,CAAnB;;AAQA,IAAMS,WAAW,GAAG,SAAdA,WAAc,OAcd;AAAA;;AAAA,MAbJC,KAaI,QAbJA,KAaI;AAAA,MAZJC,KAYI,QAZJA,KAYI;AAAA,MAXJC,SAWI,QAXJA,SAWI;AAAA,MAVJC,QAUI,QAVJA,QAUI;AAAA,MATJC,eASI,QATJA,eASI;AAAA,MARJC,mBAQI,QARJA,mBAQI;AAAA,MAPJC,sBAOI,QAPJA,sBAOI;AAAA,MANJC,aAMI,QANJA,aAMI;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,MAJaC,eAIb,QAJJC,eAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADJC,yBACI,QADJA,yBACI;;AAAA,kBAC4BC,QAAQ,CAAC,IAAD,CADpC;AAAA;AAAA,MACGC,QADH;AAAA,MACaC,WADb;;AAAA,mBAEsBF,QAAQ,CAACb,KAAD,CAF9B;AAAA;AAAA,MAEGjB,KAFH;AAAA,MAEUiC,QAFV;;AAGJ,MAAMC,iBAAiB,GAAGC,MAAM,EAAhC;AAEAC,EAAAA,SAAS,CAAC,YAAM;AACdH,IAAAA,QAAQ,CAAChB,KAAD,CAAR;AACD,GAFQ,EAEN,CAACA,KAAD,CAFM,CAAT;;AAIA,MAAMoB,UAAU,GAAG,SAAbA,UAAa,CAAAC,CAAC,EAAI;AACtBN,IAAAA,WAAW,CAACM,CAAC,CAACC,aAAH,CAAX;AACD,GAFD;;AAIA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBR,IAAAA,WAAW,CAAC,IAAD,CAAX;AACD,GAFD;;AAIA,MAAMS,YAAY,GAAG,SAAfA,YAAe,CAAAC,SAAS,EAAI;AAChC,QAAMC,cAAc,GAAGvC,UAAU,CAACc,SAAD,CAAV,CAAsBwB,SAAtB,CAAvB;AACAT,IAAAA,QAAQ,CAACU,cAAD,CAAR;AACAxB,IAAAA,QAAQ,CAACwB,cAAD,CAAR;AACD,GAJD;;AAMA,MAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAM;AACjC,QAAIV,iBAAiB,CAACW,OAAtB,EAA+B;AAC7BX,MAAAA,iBAAiB,CAACW,OAAlB,CAA0BC,cAA1B;AACD;AACF,GAJD;;AAMA,sBACEC;AACE,IAAA,SAAS,EAAEC,UAAU,CAACrB,OAAO,CAACxD,IAAT,kDAClBwD,OAAO,CAACrD,YADU,EACKiD,aAAa,KAAK,KADvB,gCAElBI,OAAO,CAACnD,cAFU,EAEO+C,aAAa,KAAK,OAFzB,gBADvB;AAAA,eAMG,CAACC,SAAD,iBACCyB,IAAC,UAAD;AACE,MAAA,SAAS,EAAED,UAAU,mDAClBrB,OAAO,CAAChC,QADU,EACC4B,aAAa,KAAK,KADnB,iCAElBI,OAAO,CAACzB,UAFU,EAEGqB,aAAa,KAAK,OAFrB,iBADvB;AAKE,MAAA,MAAM,MALR;AAAA,gBAOGP;AAPH,MAPJ,eAiBEiC,IAAC,UAAD;AACE,MAAA,SAAS,EAAED,UAAU,CAACrB,OAAO,CAAChD,MAAT,EAAiByC,eAAjB,sBAClBO,OAAO,CAAC3C,kBADU,EACWkE,MAAM,CAAClD,KAAD,CAAN,CAAcmD,KAAd,OAA0B,CADrC,EADvB;AAIE,MAAA,aAAa,MAJf;AAKE,MAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAEpD,KAAnB;AAA0BA,QAAAA,KAAK,EAAE4B;AAAjC,OALT;AAME,MAAA,OAAO,EAAES,UANX;AAAA,6BAQEY,IAACI,SAAD;AAAe,QAAA,QAAQ,EAAC,OAAxB;AAAgC,QAAA,SAAS,EAAE1B,OAAO,CAACnC;AAAnD;AARF,MAjBF,eA2BEyD,IAAC,OAAD;AACE,MAAA,EAAE,EAAC,eADL;AAEE,MAAA,MAAM,EAAEf,iBAFV;AAGE,MAAA,IAAI,EAAEoB,OAAO,CAACvB,QAAD,CAHf;AAIE,MAAA,QAAQ,EAAEA,QAJZ;AAKE,MAAA,OAAO,EAAES,WALX;AAME,MAAA,YAAY,EAAEnB,mBANhB;AAOE,MAAA,eAAe,EAAEC,sBAPnB;AAAA,6BASE2B,IAAC,eAAD;AACE,QAAA,KAAK,EAAEjD,KADT;AAEE,QAAA,QAAQ,EAAEyC,YAFZ;AAGE,QAAA,YAAY,EAAEG,oBAHhB;AAIE,QAAA,yBAAyB,EAAEf;AAJ7B;AATF,MA3BF;AAAA,IADF;AA8CD,CAzFD;;AA2FAd,WAAW,CAACwC,SAAZ,GAAwB;AACtBnC,EAAAA,eAAe,EAAEoC,SAAS,CAACC,MADL;AAGtBzC,EAAAA,KAAK,EAAEwC,SAAS,CAACC,MAHK;AAItBxC,EAAAA,KAAK,EAAEuC,SAAS,CAACC,MAAV,CAAiBC,UAJF;AAKtBvC,EAAAA,QAAQ,EAAEqC,SAAS,CAACG,IAAV,CAAeD,UALH;AAMtBxC,EAAAA,SAAS,EAAEsC,SAAS,CAACI,KAAV,CAAgBC,MAAM,CAACC,IAAP,CAAY1D,UAAZ,CAAhB,CANW;AAQtBuB,EAAAA,OAAO,EAAE6B,SAAS,CAACO,KAAV,CAAgB;AACvBpF,IAAAA,MAAM,EAAE6E,SAAS,CAACC,MAAV,CAAiBC;AADF,GAAhB,EAENA,UAVmB;AAWtBhC,EAAAA,eAAe,EAAE8B,SAAS,CAACQ,IAXL;AAatBzC,EAAAA,aAAa,EAAEiC,SAAS,CAACI,KAAV,CAAgB,CAAC,KAAD,EAAQ,OAAR,CAAhB,CAbO;AActBvC,EAAAA,mBAAmB,EAAEmC,SAAS,CAACO,KAAV,CAAgB,EAAhB,CAdC;AAetBzC,EAAAA,sBAAsB,EAAEkC,SAAS,CAACO,KAAV,CAAgB,EAAhB,CAfF;AAiBtBvC,EAAAA,SAAS,EAAEgC,SAAS,CAACS,IAjBC;AAkBtBrC,EAAAA,SAAS,EAAE4B,SAAS,CAACC,MAlBC;AAoBtB5B,EAAAA,yBAAyB,EAAE2B,SAAS,CAACS;AApBf,CAAxB;AAuBAlD,WAAW,CAACmD,YAAZ,GAA2B;AACzBlD,EAAAA,KAAK,EAAE,OADkB;AAEzBI,EAAAA,eAAe,EAAE,IAFQ;AAGzBF,EAAAA,SAAS,EAAE,UAHc;AAIzBQ,EAAAA,eAAe,EAAEyC,mBAJQ;AAKzB3C,EAAAA,SAAS,EAAE,KALc;AAMzBH,EAAAA,mBAAmB,EAAE;AACnB+C,IAAAA,QAAQ,EAAE,QADS;AAEnBC,IAAAA,UAAU,EAAE;AAFO,GANI;AAUzB/C,EAAAA,sBAAsB,EAAE;AACtB8C,IAAAA,QAAQ,EAAE,KADY;AAEtBC,IAAAA,UAAU,EAAE;AAFU,GAVC;AAczB9C,EAAAA,aAAa,EAAE,KAdU;AAezBK,EAAAA,SAAS,EAAE,MAfc;AAgBzBC,EAAAA,yBAAyB,EAAE;AAhBF,CAA3B;AAmBA,oBAAeyC,UAAU,CAACpG,SAAD,CAAV,CAAsB6C,WAAtB,CAAf;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSquare.js","sources":["../../../../../src/components/ColorPicker/PaletteChromePicker/ColorSquare/ColorSquare.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport CheckRoundedIcon from '@material-ui/icons/CheckRounded';\nimport { makeStyles } from '@material-ui/core';\nimport classNames from 'classnames';\nimport chroma from 'chroma-js';\n\nimport Checkboard from '~/assets/checkboard.svg';\n\nconst useStyles = makeStyles({\n  container: {\n    position: 'relative',\n    cursor: 'pointer',\n    width: '16px',\n    height: '16px',\n    borderRadius: '2px',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    '&:hover': {\n      border: '1px solid white',\n    },\n  },\n  containerSelected: {\n    border: '1px solid white',\n    '& $squareCheck': {\n      visibility: 'visible',\n    },\n  },\n  transparentContainer: {\n    position: 'relative',\n    border: '1px solid #C4C4C4;',\n    backgroundImage: `url(${Checkboard})`,\n    backgroundSize: 'cover',\n    backgroundPosition: 'center',\n\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      display: 'block',\n      width: '100%',\n      height: '2px',\n      background: '#FF0000',\n      transform: 'rotate(135deg)',\n      borderRadius: '2px',\n    },\n  },\n  squareCheck: {\n    width: '16px',\n    height: '16px',\n    color: 'white',\n    visibility: 'hidden',\n    zIndex: 2,\n  },\n});\n\nfunction ColorSquare({ color, isSelected, onClick }) {\n  const classes = useStyles();\n\n  return (\n    <div\n      className={classNames(classes.container, {\n        [classes.transparentContainer]: chroma(color).alpha() === 0,\n        [classes.containerSelected]: isSelected,\n      })}\n      style={{ backgroundColor: color }}\n      onClick={onClick}\n    >\n      <CheckRoundedIcon fontSize=\"small\" className={classes.squareCheck} />\n    </div>\n  );\n}\n\nColorSquare.propTypes = {\n  color: PropTypes.string.isRequired,\n  isSelected: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nexport default ColorSquare;\n"],"names":["useStyles","makeStyles","container","position","cursor","width","height","borderRadius","display","justifyContent","alignItems","border","containerSelected","visibility","transparentContainer","backgroundImage","Checkboard","backgroundSize","backgroundPosition","content","background","transform","squareCheck","color","zIndex","ColorSquare","isSelected","onClick","classes","_jsx","classNames","chroma","alpha","backgroundColor","propTypes","PropTypes","string","isRequired","bool","func"],"mappings":";;;;;;;;;AAQA,IAAMA,SAAS,GAAGC,UAAU,CAAC;AAC3BC,EAAAA,SAAS,EAAE;AACTC,IAAAA,QAAQ,EAAE,UADD;AAETC,IAAAA,MAAM,EAAE,SAFC;AAGTC,IAAAA,KAAK,EAAE,MAHE;AAITC,IAAAA,MAAM,EAAE,MAJC;AAKTC,IAAAA,YAAY,EAAE,KALL;AAMTC,IAAAA,OAAO,EAAE,MANA;AAOTC,IAAAA,cAAc,EAAE,QAPP;AAQTC,IAAAA,UAAU,EAAE,QARH;AAST,eAAW;AACTC,MAAAA,MAAM,EAAE;AADC;AATF,GADgB;AAc3BC,EAAAA,iBAAiB,EAAE;AACjBD,IAAAA,MAAM,EAAE,iBADS;AAEjB,sBAAkB;AAChBE,MAAAA,UAAU,EAAE;AADI;AAFD,GAdQ;AAoB3BC,EAAAA,oBAAoB,EAAE;AACpBX,IAAAA,QAAQ,EAAE,UADU;AAEpBQ,IAAAA,MAAM,EAAE,oBAFY;AAGpBI,IAAAA,eAAe,gBAASC,UAAT,MAHK;AAIpBC,IAAAA,cAAc,EAAE,OAJI;AAKpBC,IAAAA,kBAAkB,EAAE,QALA;AAOpB,iBAAa;AACXC,MAAAA,OAAO,EAAE,IADE;AAEXhB,MAAAA,QAAQ,EAAE,UAFC;AAGXK,MAAAA,OAAO,EAAE,OAHE;AAIXH,MAAAA,KAAK,EAAE,MAJI;AAKXC,MAAAA,MAAM,EAAE,KALG;AAMXc,MAAAA,UAAU,EAAE,SAND;AAOXC,MAAAA,SAAS,EAAE,gBAPA;AAQXd,MAAAA,YAAY,EAAE;AARH;AAPO,GApBK;AAsC3Be,EAAAA,WAAW,EAAE;AACXjB,IAAAA,KAAK,EAAE,MADI;AAEXC,IAAAA,MAAM,EAAE,MAFG;AAGXiB,IAAAA,KAAK,EAAE,OAHI;AAIXV,IAAAA,UAAU,EAAE,QAJD;AAKXW,IAAAA,MAAM,EAAE;AALG;AAtCc,CAAD,CAA5B;;AA+CA,SAASC,WAAT,OAAqD;AAAA;;AAAA,MAA9BF,KAA8B,QAA9BA,KAA8B;AAAA,MAAvBG,UAAuB,QAAvBA,UAAuB;AAAA,MAAXC,OAAW,QAAXA,OAAW;AACnD,MAAMC,OAAO,GAAG5B,SAAS,EAAzB;AAEA,sBACE6B;AACE,IAAA,SAAS,EAAEC,UAAU,CAACF,OAAO,CAAC1B,SAAT,kDAClB0B,OAAO,CAACd,oBADU,EACaiB,MAAM,CAACR,KAAD,CAAN,CAAcS,KAAd,OAA0B,CADvC,gCAElBJ,OAAO,CAAChB,iBAFU,EAEUc,UAFV,gBADvB;AAKE,IAAA,KAAK,EAAE;AAAEO,MAAAA,eAAe,EAAEV;AAAnB,KALT;AAME,IAAA,OAAO,EAAEI,OANX;AAAA,2BAQEE,IAAC,gBAAD;AAAkB,MAAA,QAAQ,EAAC,OAA3B;AAAmC,MAAA,SAAS,EAAED,OAAO,CAACN;AAAtD;AARF,IADF;AAYD;;AAEDG,WAAW,CAACS,SAAZ,GAAwB;AACtBX,EAAAA,KAAK,EAAEY,SAAS,CAACC,MAAV,CAAiBC,UADF;AAEtBX,EAAAA,UAAU,EAAES,SAAS,CAACG,IAAV,CAAeD,UAFL;AAGtBV,EAAAA,OAAO,EAAEQ,SAAS,CAACI,IAAV,CAAeF;AAHF,CAAxB;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,0DAA+D;AACvF;AACA;AACA;AACA;AACA;AACA;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Palette.js","sources":["../../../../../src/components/ColorPicker/PaletteChromePicker/Palette/Palette.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { CustomPicker } from 'react-color';\nimport classNames from 'classnames';\nimport chroma from 'chroma-js';\n\nimport ColorSquare from '../ColorSquare';\nimport { paletteColors, paletteColorsWithTransparent } from './PaletteConstants';\n\nimport styles from './Palette.css';\n\nconst isSelected = (currentColor, predefinedColor) => {\n  const currentColorAlpha = chroma(currentColor).alpha();\n  const predefinedColorAlpha = chroma(predefinedColor).alpha();\n\n  if (!currentColorAlpha) return currentColorAlpha === predefinedColorAlpha;\n  return currentColor === predefinedColor;\n};\n\nconst Palette = ({ onChange, color, className, enableTransparencyPalette }) => {\n  const colors = enableTransparencyPalette ? paletteColorsWithTransparent : paletteColors;\n\n  return (\n    <div className={classNames(styles.paletteContainer, className)}>\n      {colors.map(predefinedColor => (\n        <ColorSquare\n          key={predefinedColor}\n          color={predefinedColor}\n          isSelected={isSelected(color, predefinedColor)}\n          onClick={() => {\n            onChange(predefinedColor);\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n\nPalette.propTypes = {\n  onChange: PropTypes.func.isRequired,\n  color: PropTypes.string.isRequired,\n  className: PropTypes.string,\n  enableTransparencyPalette: PropTypes.bool.isRequired,\n};\n\nPalette.defaultProps = {\n  className: null,\n};\n\nexport default CustomPicker(Palette);\n"],"names":["isSelected","currentColor","predefinedColor","currentColorAlpha","chroma","alpha","predefinedColorAlpha","Palette","onChange","color","className","enableTransparencyPalette","colors","paletteColorsWithTransparent","paletteColors","_jsx","classNames","styles","paletteContainer","map","propTypes","PropTypes","func","isRequired","string","bool","defaultProps","CustomPicker"],"mappings":";;;;;;;;;AAUA,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,YAAD,EAAeC,eAAf,EAAmC;AACpD,MAAMC,iBAAiB,GAAGC,MAAM,CAACH,YAAD,CAAN,CAAqBI,KAArB,EAA1B;AACA,MAAMC,oBAAoB,GAAGF,MAAM,CAACF,eAAD,CAAN,CAAwBG,KAAxB,EAA7B;AAEA,MAAI,CAACF,iBAAL,EAAwB,OAAOA,iBAAiB,KAAKG,oBAA7B;AACxB,SAAOL,YAAY,KAAKC,eAAxB;AACD,CAND;;AAQA,IAAMK,OAAO,GAAG,SAAVA,OAAU,OAA+D;AAAA,MAA5DC,QAA4D,QAA5DA,QAA4D;AAAA,MAAlDC,KAAkD,QAAlDA,KAAkD;AAAA,MAA3CC,SAA2C,QAA3CA,SAA2C;AAAA,MAAhCC,yBAAgC,QAAhCA,yBAAgC;AAC7E,MAAMC,MAAM,GAAGD,yBAAyB,GAAGE,4BAAH,GAAkCC,aAA1E;AAEA,sBACEC;AAAK,IAAA,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,gBAAR,EAA0BR,SAA1B,CAA1B;AAAA,cACGE,MAAM,CAACO,GAAP,CAAW,UAAAjB,eAAe;AAAA,0BACzBa,IAAC,WAAD;AAEE,QAAA,KAAK,EAAEb,eAFT;AAGE,QAAA,UAAU,EAAEF,UAAU,CAACS,KAAD,EAAQP,eAAR,CAHxB;AAIE,QAAA,OAAO,EAAE,mBAAM;AACbM,UAAAA,QAAQ,CAACN,eAAD,CAAR;AACD;AANH,SACOA,eADP,CADyB;AAAA,KAA1B;AADH,IADF;AAcD,CAjBD;;AAmBAK,OAAO,CAACa,SAAR,GAAoB;AAClBZ,EAAAA,QAAQ,EAAEa,SAAS,CAACC,IAAV,CAAeC,UADP;AAElBd,EAAAA,KAAK,EAAEY,SAAS,CAACG,MAAV,CAAiBD,UAFN;AAGlBb,EAAAA,SAAS,EAAEW,SAAS,CAACG,MAHH;AAIlBb,EAAAA,yBAAyB,EAAEU,SAAS,CAACI,IAAV,CAAeF;AAJxB,CAApB;AAOAhB,OAAO,CAACmB,YAAR,GAAuB;AACrBhB,EAAAA,SAAS,EAAE;AADU,CAAvB;AAIA,gBAAeiB,YAAY,CAACpB,OAAD,CAA3B;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaletteConstants.js","sources":["../../../../../src/components/ColorPicker/PaletteChromePicker/Palette/PaletteConstants.js"],"sourcesContent":["export const paletteColors = [\n  // row 1\n  '#c4c4c4',\n  '#9b2310',\n  '#ac5d09',\n  '#a99704',\n  '#6f920d',\n  '#408e00',\n  '#05907b',\n  '#028597',\n  '#295abb',\n  '#4d2fbf',\n  '#8a1caa',\n  '#921d48',\n  '#445f6c',\n  // row 2\n  '#000000',\n  '#eb3f24',\n  '#ff8200',\n  '#ffe300',\n  '#b9ed24',\n  '#7eed24',\n  '#1edcc1',\n  '#00e0ff',\n  '#558dfc',\n  '#714cff',\n  '#cc2afb',\n  '#f6377c',\n  '#738e9d',\n  // row 3\n  '#ffffff',\n  '#fe8977',\n  '#fbb368',\n  '#fff17f',\n  '#d6ff61',\n  '#b9ff81',\n  '#78feea',\n  '#79efff',\n  '#97baff',\n  '#ad99fb',\n  '#e488ff',\n  '#ff87b3',\n  '#bbc6cc',\n];\n\nexport const TRANSPARENT_HEX = '#00000000';\n\nexport const paletteColorsWithTransparent = paletteColors.map((color, i) => {\n  return i === 0 ? TRANSPARENT_HEX : color;\n});\n"],"names":["paletteColors","TRANSPARENT_HEX","paletteColorsWithTransparent","map","color","i"],"mappings":"IAAaA,aAAa,GAAG;AAE3B,SAF2B,EAG3B,SAH2B,EAI3B,SAJ2B,EAK3B,SAL2B,EAM3B,SAN2B,EAO3B,SAP2B,EAQ3B,SAR2B,EAS3B,SAT2B,EAU3B,SAV2B,EAW3B,SAX2B,EAY3B,SAZ2B,EAa3B,SAb2B,EAc3B,SAd2B;AAgB3B,SAhB2B,EAiB3B,SAjB2B,EAkB3B,SAlB2B,EAmB3B,SAnB2B,EAoB3B,SApB2B,EAqB3B,SArB2B,EAsB3B,SAtB2B,EAuB3B,SAvB2B,EAwB3B,SAxB2B,EAyB3B,SAzB2B,EA0B3B,SA1B2B,EA2B3B,SA3B2B,EA4B3B,SA5B2B;AA8B3B,SA9B2B,EA+B3B,SA/B2B,EAgC3B,SAhC2B,EAiC3B,SAjC2B,EAkC3B,SAlC2B,EAmC3B,SAnC2B,EAoC3B,SApC2B,EAqC3B,SArC2B,EAsC3B,SAtC2B,EAuC3B,SAvC2B,EAwC3B,SAxC2B,EAyC3B,SAzC2B,EA0C3B,SA1C2B;IA6ChBC,eAAe,GAAG;IAElBC,4BAA4B,GAAGF,aAAa,CAACG,GAAd,CAAkB,UAACC,KAAD,EAAQC,CAAR,EAAc;AAC1E,SAAOA,CAAC,KAAK,CAAN,GAAUJ,eAAV,GAA4BG,KAAnC;AACD,CAF2C;;;;"}

package/components/ColorPicker/PaletteChromePicker/PaletteChromePicker.js

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