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

package/components/ColorPicker/ColorPicker.js

@@ -1,232 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { withStyles, InputLabel, Tooltip, IconButton, Popover } from '@material-ui/core';
-import { ColorLens } from '@material-ui/icons';
-import chroma from 'chroma-js';
-import classNames from 'classnames';
-import validateColor from 'validate-color';
-import PaletteChromePicker from './PaletteChromePicker/PaletteChromePicker.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Checkboard = "/static/media/39f55985e0da1489ad22264208b0493d.svg";
-var DEFAULT_COLOR = '#03BCD4';
-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,
-    PAGE_NAME = _ref['data-testid'],
-    tooltipProps = _ref.tooltipProps;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    anchorEl = _useState2[0],
-    setAnchorEl = _useState2[1];
-  var _useState3 = useState(DEFAULT_COLOR),
-    _useState4 = _slicedToArray(_useState3, 2),
-    color = _useState4[0],
-    setColor = _useState4[1];
-  var popperInstanceRef = useRef();
-  useEffect(function () {
-    var newColor = value === null || value === void 0 ? void 0 : value.trim();
-    if (newColor && validateColor(newColor)) setColor(newColor);else console.error("The color value(".concat(value, ") is not valid, please check it."));
-  }, [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(Tooltip, _objectSpread(_objectSpread({
-      title: tooltipProps.title
-    }, tooltipProps), {}, {
-      children: /*#__PURE__*/jsx(IconButton, {
-        "data-testid": "".concat(PAGE_NAME, "_icon_").concat(label),
-        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
-      })
-    })]
-  });
-};
-var popoverOriginPropType = PropTypes.shape({
-  vertical: PropTypes.oneOfType([PropTypes.oneOf(['top', 'center', 'bottom']), PropTypes.number]),
-  horizontal: PropTypes.oneOfType([PropTypes.oneOf(['left', 'center', 'right']), PropTypes.number])
-});
-var colorPickerPropTypes = {
-  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,
-    root: PropTypes.string,
-    topLabelRoot: PropTypes.string,
-    rightLabelRoot: PropTypes.string,
-    topLabel: PropTypes.string,
-    rightLabel: PropTypes.string,
-    buttonTransparrent: PropTypes.string,
-    colorLensIcon: PropTypes.string
-  }).isRequired,
-  pickerComponent: PropTypes.elementType,
-  labelPosition: PropTypes.oneOf(['top', 'right']),
-  popoverAnchorOrigin: popoverOriginPropType,
-  popoverTransformOrigin: popoverOriginPropType,
-  tooltipProps: PropTypes.shape({
-    title: PropTypes.string
-  }),
-  hideLabel: PropTypes.bool,
-  lensColor: PropTypes.string,
-  enableTransparencyPalette: PropTypes.bool,
-  'data-testid': PropTypes.string
-};
-ColorPicker.propTypes = colorPickerPropTypes;
-ColorPicker.defaultProps = {
-  label: 'Color',
-  buttonClassName: null,
-  converter: 'rgba_hex',
-  pickerComponent: PaletteChromePicker,
-  hideLabel: false,
-  popoverAnchorOrigin: {
-    vertical: 'bottom',
-    horizontal: 'left'
-  },
-  popoverTransformOrigin: {
-    vertical: 'top',
-    horizontal: 'left'
-  },
-  tooltipProps: {
-    title: 'Change color'
-  },
-  labelPosition: 'top',
-  lensColor: '#fff',
-  enableTransparencyPalette: false,
-  'data-testid': 'ColorPicker'
-};
-var ColorPicker$1 = withStyles({
-  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'
-  }
-})(ColorPicker);
-
-export { ColorPicker$1 as default };
-//# sourceMappingURL=ColorPicker.js.map
+import{__assign as o}from'./../../ext-esm/tslib/tslib.es6.js';import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as a}from"react";import i from"prop-types";import{withStyles as l,InputLabel as c,Tooltip as s,IconButton as p,Popover as b}from"@material-ui/core";import{ColorLens as g}from"@material-ui/icons";import u from"chroma-js";import m from"classnames";import h from"validate-color";import d from"./PaletteChromePicker/PaletteChromePicker.js";var f={rgba:function(o){return"rgba(".concat(o.rgb.r,", ").concat(o.rgb.g,", ").concat(o.rgb.b,", ").concat(o.rgb.a,")")},rgb:function(o){return"rgb(".concat(o.rgb.r,", ").concat(o.rgb.g,", ").concat(o.rgb.b,")")},hex:function(o){return o.hex},rgba_rgb:function(o){return 1===o.rgb.a?f.rgb(o):f.rgba(o)},rgba_hex:function(o){return 1===o.rgb.a?f.hex(o):f.rgba(o)}},v=function(i){var l,d,v,x=i.label,C=i.value,L=i.converter,P=i.onChange,k=i.buttonClassName,T=i.popoverAnchorOrigin,O=i.popoverTransformOrigin,y=i.labelPosition,R=i.hideLabel,z=i.pickerComponent,S=i.classes,I=i.lensColor,N=i.enableTransparencyPalette,j=i["data-testid"],w=i.tooltipProps,B=t(null),D=B[0],_=B[1],q=t("#03BCD4"),A=q[0],F=q[1],E=n();a((function(){var o=null==C?void 0:C.trim();o&&h(o)?F(o):console.error("The color value(".concat(C,") is not valid, please check it."))}),[C]);return e("div",o({className:m(S.root,(l={},l[S.topLabelRoot]="top"===y,l[S.rightLabelRoot]="right"===y,l))},{children:[!R&&r(c,o({className:m((d={},d[S.topLabel]="top"===y,d[S.rightLabel]="right"===y,d)),shrink:!0},{children:x})),r(s,o({title:w.title},w,{children:r(p,o({"data-testid":"".concat(j,"_icon_").concat(x),className:m(S.button,k,(v={},v[S.buttonTransparrent]=0===u(A).alpha(),v)),disableRipple:!0,style:{backgroundColor:A,color:I},onClick:function(o){_(o.currentTarget)}},{children:r(g,{fontSize:"small",className:S.colorLensIcon})}))})),r(b,o({id:"colors-popper",action:E,open:Boolean(D),anchorEl:D,onClose:function(){_(null)},anchorOrigin:T,transformOrigin:O},{children:r(z,{color:A,onChange:function(o){var e=f[L](o);F(e),P(e)},onSizeChange:function(){E.current&&E.current.updatePosition()},enableTransparencyPalette:N})}))]}))},x=i.shape({vertical:i.oneOfType([i.oneOf(["top","center","bottom"]),i.number]),horizontal:i.oneOfType([i.oneOf(["left","center","right"]),i.number])}),C={buttonClassName:i.string,label:i.string,value:i.string.isRequired,onChange:i.func.isRequired,converter:i.oneOf(Object.keys(f)),classes:i.shape({button:i.string.isRequired,root:i.string,topLabelRoot:i.string,rightLabelRoot:i.string,topLabel:i.string,rightLabel:i.string,buttonTransparrent:i.string,colorLensIcon:i.string}).isRequired,pickerComponent:i.elementType,labelPosition:i.oneOf(["top","right"]),popoverAnchorOrigin:x,popoverTransformOrigin:x,tooltipProps:i.shape({title:i.string}),hideLabel:i.bool,lensColor:i.string,enableTransparencyPalette:i.bool,"data-testid":i.string};v.propTypes=C,v.defaultProps={label:"Color",buttonClassName:null,converter:"rgba_hex",pickerComponent:d,hideLabel:!1,popoverAnchorOrigin:{vertical:"bottom",horizontal:"left"},popoverTransformOrigin:{vertical:"top",horizontal:"left"},tooltipProps:{title:"Change color"},labelPosition:"top",lensColor:"#fff",enableTransparencyPalette:!1,"data-testid":"ColorPicker"};var L=l({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"}})(v);export{L as default};

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

@@ -1,82 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import PropTypes from 'prop-types';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
-import { makeStyles } from '@material-ui/core';
-import classNames from 'classnames';
-import chroma from 'chroma-js';
-import { jsx } from 'react/jsx-runtime';
-
-var Checkboard = "/static/media/39f55985e0da1489ad22264208b0493d.svg";
-var PAGE_NAME = 'ColorSquare';
-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", {
-    "data-testid": "".concat(PAGE_NAME, "_color_").concat(color, "_selected_").concat(isSelected),
-    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 { ColorSquare as default };
-//# sourceMappingURL=ColorSquare.js.map
+import e from"@babel/runtime/helpers/defineProperty";import r from"prop-types";import o from"@material-ui/icons/CheckRounded";import{makeStyles as i}from"@material-ui/core";import t from"classnames";import a from"chroma-js";import{jsx as n}from"react/jsx-runtime";var c=i({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 s(r){var i,s=r.color,d=r.isSelected,l=r.onClick,p=c();return n("div",{"data-testid":"".concat("ColorSquare","_color_").concat(s,"_selected_").concat(d),className:t(p.container,(i={},e(i,p.transparentContainer,0===a(s).alpha()),e(i,p.containerSelected,d),i)),style:{backgroundColor:s},onClick:l,children:n(o,{fontSize:"small",className:p.squareCheck})})}s.propTypes={color:r.string.isRequired,isSelected:r.bool.isRequired,onClick:r.func.isRequired};export{s 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__S2Z3b {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, 16px);\n  gap: 2px;\n  width: 232px;\n}\n";
-var styles = {"paletteContainer":"Palette_paletteContainer__S2Z3b"};
-styleInject(css_248z);
-
-export { styles as default };
-//# 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,47 +1 @@
-import PropTypes from 'prop-types';
-import { CustomPicker } from 'react-color';
-import classNames from 'classnames';
-import chroma from 'chroma-js';
-import ColorSquare from '../ColorSquare/ColorSquare.js';
-import { paletteColorsWithTransparent, paletteColors } from './PaletteConstants.js';
-import styles from './Palette.css.js';
-import { jsx } from 'react/jsx-runtime';
-
-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 { Palette$1 as default };
-//# 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,14 +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,185 +1 @@
-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
+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};