@corva/ui 3.1.0-rc.4 → 3.1.0-rc.5

package/components/CollapsibleContent.js

@@ -1 +1,94 @@
-import e from"@babel/runtime/helpers/slicedToArray";import{useState as r,useRef as t,useEffect as i}from"react";import n from"prop-types";import{makeStyles as o,Button as a}from"@material-ui/core";import{jsxs as c,jsx as l,Fragment as d}from"react/jsx-runtime";var p=o((function(e){return{contentWrapper:{position:"relative"},content:{overflow:"hidden"},readMore:{height:40,display:"block",textAlign:"right"},blackOut:{width:"100%",position:"absolute",justifyContent:"flex-end",background:"linear-gradient(to bottom, transparent, ".concat(e.palette.background.paper,")"),height:40,marginTop:-40}}})),s=function(n){var o=n.maxHeight,s=n.children,m=p(),u=r(!1),h=e(u,2),f=h[0],g=h[1],b=r(!1),v=e(b,2),x=v[0],y=v[1],H=t();return i((function(){!function(){var e=o&&H.current.clientHeight>o+40;y(e),g(e)}()}),[s]),c("div",{className:m.contentWrapper,children:[l("div",{className:m.content,style:{maxHeight:x?o:"initial"},children:l("div",{ref:H,children:s})}),f&&c("div",{className:m.readMore,children:[x&&l("div",{className:m.blackOut}),l(a,{onClick:function(){y((function(e){return!e})),x&&window.innerHeight<H.current.clientHeight&&H.current.scrollIntoView()},children:x?l(d,{children:"Read more …"}):"Show less"})]})]})};s.propTypes={children:n.oneOfType([n.node,n.string]).isRequired,maxHeight:n.number},s.defaultProps={maxHeight:120};export{s as default};
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles, Button } from '@material-ui/core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var MIN_STEP_TO_MAKE_ITEM_COLLAPSABLE = 40;
+var BLACKOUT_HEIGHT = 40;
+var useStyles = makeStyles(function (theme) {
+  return {
+    contentWrapper: {
+      position: 'relative'
+    },
+    content: {
+      overflow: 'hidden'
+    },
+    readMore: {
+      height: 40,
+      display: 'block',
+      textAlign: 'right'
+    },
+    blackOut: {
+      width: '100%',
+      position: 'absolute',
+      justifyContent: 'flex-end',
+      background: "linear-gradient(to bottom, transparent, ".concat(theme.palette.background.paper, ")"),
+      height: BLACKOUT_HEIGHT,
+      marginTop: -BLACKOUT_HEIGHT
+    }
+  };
+});
+var CollapsibleContent = function CollapsibleContent(_ref) {
+  var maxHeight = _ref.maxHeight,
+    children = _ref.children;
+  var classes = useStyles();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    collapsible = _useState2[0],
+    setCollapsible = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    collapsed = _useState4[0],
+    setCollapsed = _useState4[1];
+  var contentRef = useRef();
+  var setCollapsingStatus = function setCollapsingStatus() {
+    var collapsible = maxHeight && contentRef.current.clientHeight > maxHeight + MIN_STEP_TO_MAKE_ITEM_COLLAPSABLE;
+    setCollapsed(collapsible);
+    setCollapsible(collapsible);
+  };
+  var toggleCollapse = function toggleCollapse() {
+    setCollapsed(function (collapsed) {
+      return !collapsed;
+    });
+    if (collapsed && window.innerHeight < contentRef.current.clientHeight) {
+      contentRef.current.scrollIntoView();
+    }
+  };
+  useEffect(function () {
+    setCollapsingStatus();
+  }, [children]);
+  return /*#__PURE__*/jsxs("div", {
+    className: classes.contentWrapper,
+    children: [/*#__PURE__*/jsx("div", {
+      className: classes.content,
+      style: {
+        maxHeight: collapsed ? maxHeight : 'initial'
+      },
+      children: /*#__PURE__*/jsx("div", {
+        ref: contentRef,
+        children: children
+      })
+    }), collapsible && /*#__PURE__*/jsxs("div", {
+      className: classes.readMore,
+      children: [collapsed && /*#__PURE__*/jsx("div", {
+        className: classes.blackOut
+      }), /*#__PURE__*/jsx(Button, {
+        onClick: toggleCollapse,
+        children: collapsed ? /*#__PURE__*/jsx(Fragment, {
+          children: "Read more \u2026"
+        }) : 'Show less'
+      })]
+    })]
+  });
+};
+CollapsibleContent.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
+  maxHeight: PropTypes.number
+};
+CollapsibleContent.defaultProps = {
+  maxHeight: 120
+};
+
+export { CollapsibleContent as default };
+//# sourceMappingURL=CollapsibleContent.js.map

package/components/CollapsibleContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleContent.js","sources":["../../src/components/CollapsibleContent.js"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, makeStyles } from '@material-ui/core';\n\nconst MIN_STEP_TO_MAKE_ITEM_COLLAPSABLE = 40;\nconst BLACKOUT_HEIGHT = 40;\n\nconst useStyles = makeStyles(theme => ({\n  contentWrapper: {\n    position: 'relative',\n  },\n  content: {\n    overflow: 'hidden',\n  },\n  readMore: {\n    height: 40,\n    display: 'block',\n    textAlign: 'right',\n  },\n  blackOut: {\n    width: '100%',\n    position: 'absolute',\n    justifyContent: 'flex-end',\n    background: `linear-gradient(to bottom, transparent, ${theme.palette.background.paper})`,\n    height: BLACKOUT_HEIGHT,\n    marginTop: -BLACKOUT_HEIGHT,\n  },\n}));\n\nconst CollapsibleContent = ({ maxHeight, children }) => {\n  const classes = useStyles();\n  const [collapsible, setCollapsible] = useState(false);\n  const [collapsed, setCollapsed] = useState(false);\n\n  const contentRef = useRef();\n\n  const setCollapsingStatus = () => {\n    const collapsible =\n      maxHeight && contentRef.current.clientHeight > maxHeight + MIN_STEP_TO_MAKE_ITEM_COLLAPSABLE;\n\n    setCollapsed(collapsible);\n    setCollapsible(collapsible);\n  };\n\n  const toggleCollapse = () => {\n    setCollapsed(collapsed => !collapsed);\n    if (collapsed && window.innerHeight < contentRef.current.clientHeight) {\n      contentRef.current.scrollIntoView();\n    }\n  };\n\n  useEffect(() => {\n    setCollapsingStatus();\n  }, [children]);\n\n  return (\n    <div className={classes.contentWrapper}>\n      <div className={classes.content} style={{ maxHeight: collapsed ? maxHeight : 'initial' }}>\n        <div ref={contentRef}>{children}</div>\n      </div>\n      {collapsible && (\n        <div className={classes.readMore}>\n          {collapsed && <div className={classes.blackOut} />}\n          <Button onClick={toggleCollapse}>\n            {collapsed ? <>Read more &hellip;</> : 'Show less'}\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n\nCollapsibleContent.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,\n  maxHeight: PropTypes.number,\n};\n\nCollapsibleContent.defaultProps = {\n  maxHeight: 120,\n};\n\nexport default CollapsibleContent;\n"],"names":["MIN_STEP_TO_MAKE_ITEM_COLLAPSABLE","BLACKOUT_HEIGHT","useStyles","makeStyles","theme","contentWrapper","position","content","overflow","readMore","height","display","textAlign","blackOut","width","justifyContent","background","palette","paper","marginTop","CollapsibleContent","maxHeight","children","classes","useState","collapsible","setCollapsible","collapsed","setCollapsed","contentRef","useRef","setCollapsingStatus","current","clientHeight","toggleCollapse","window","innerHeight","scrollIntoView","useEffect","_jsxs","_jsx","_Fragment","propTypes","PropTypes","oneOfType","node","string","isRequired","number","defaultProps"],"mappings":"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"}

package/components/ColorPicker/ColorPicker.js

@@ -1 +1,231 @@
-import{__assign as o}from'./../../ext-esm/tslib/tslib.es6.js';import{jsxs as n,jsx as t}from"react/jsx-runtime";import{useState as i,useRef as r,useEffect as c}from"react";import{makeStyles as e,InputLabel as s,Tooltip as a,IconButton as l,Popover as p}from"@material-ui/core";import m from"chroma-js";import u from"classnames";import d from"./PaletteChromePicker/PaletteChromePicker.js";import{PaletteIcon as b}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/Gap.js";import{getValidColor as g,getButtonStrokeColor as h,findParentBackground as f}from"./ColorPicketUtils.js";var x={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?x.rgb(o):x.rgba(o)},rgba_hex:function(o){return 1===o.rgb.a?x.hex(o):x.rgba(o)}},I=e({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:"8px",fontSize:"1rem"},buttonTransparent:{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:"16px",letterSpacing:"0.4px",color:"#BDBDBD",whiteSpace:"nowrap"},rightLabel:{marginLeft:"8px",fontSize:"16px"}}),j=function(e){var j,v,C,k=e.label,P=void 0===k?"Color":k,L=e.value,z=e.converter,R=void 0===z?"rgba_hex":z,S=e.onChange,F=e.buttonClassName,D=e.popoverAnchorOrigin,O=void 0===D?{vertical:"bottom",horizontal:"left"}:D,T=e.popoverTransformOrigin,w=void 0===T?{vertical:"top",horizontal:"left"}:T,y=e.labelPosition,B=void 0===y?"top":y,_=e.hideLabel,N=void 0!==_&&_,A=e.pickerComponent,E=void 0===A?d:A,M=e.lensColor,q=e.enableTransparencyPalette,G=void 0!==q&&q,H=e["data-testid"],U=void 0===H?"ColorPicker":H,W=e.tooltipProps,Z=void 0===W?{title:"Change color",children:null}:W,J=I(),K=i(null),Q=K[0],V=K[1],X=i((function(){return g(L)||"#03BCD4"})),Y=X[0],$=X[1],oo=r(),no=i(null),to=no[0],io=no[1],ro=M||h(to,Y);c((function(){var o=g(L);o?$(o):console.error("The color value(".concat(L,") is not valid, please check it."))}),[L]);return n("div",{className:u(J.root,(j={},j[J.topLabelRoot]="top"===B,j[J.rightLabelRoot]="right"===B,j)),ref:function(o){return io(f(o))},children:[!N&&t(s,{className:u((v={},v[J.topLabel]="top"===B,v[J.rightLabel]="right"===B,v)),shrink:!0,children:P}),t(a,o({title:Z.title},Z,{children:t(l,{"data-testid":"".concat(U,"_icon_").concat(P),className:u(J.button,F,(C={},C[J.buttonTransparent]=0===m(Y).alpha(),C)),disableRipple:!0,style:{backgroundColor:Y,color:ro},onClick:function(o){V(o.currentTarget)},size:"small",children:t(b,{size:16,className:J.colorLensIcon})})})),t(p,{id:"colors-popper",action:oo,open:Boolean(Q),anchorEl:Q,onClose:function(){V(null)},anchorOrigin:O,transformOrigin:w,children:t(E,{color:Y,onChange:function(o){var n=x[R](o);$(n),S(n)},onSizeChange:function(){oo.current&&oo.current.updatePosition()},enableTransparencyPalette:G})})]})};export{j as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef, useEffect } from 'react';
+import { makeStyles, InputLabel, Tooltip, IconButton, Popover } from '@material-ui/core';
+import chroma from 'chroma-js';
+import classNames from 'classnames';
+import PaletteChromePicker from './PaletteChromePicker/PaletteChromePicker.js';
+import { PaletteIcon } from '../../icons/iconParkIcons.js';
+import '../../icons/customIcons/icons/AddMessage.js';
+import '../../icons/customIcons/icons/Attention.js';
+import '../../icons/customIcons/icons/Collapse.js';
+import '../../icons/customIcons/icons/Dashboard.js';
+import '../../icons/customIcons/icons/Expand.js';
+import '../../icons/customIcons/icons/FolderClosed.js';
+import '../../icons/customIcons/icons/FolderClosedFilled.js';
+import '../../icons/customIcons/icons/FolderOpened.js';
+import '../../icons/customIcons/icons/GreaterOrEqual.js';
+import '../../icons/customIcons/icons/LessOrEqual.js';
+import '../../icons/customIcons/icons/Search.js';
+import '../../icons/customIcons/icons/Wellhub.js';
+import '../../icons/customIcons/icons/MultiRuler.js';
+import '../../icons/customIcons/icons/Checkbox.js';
+import '../../icons/customIcons/icons/CheckboxChecked.js';
+import '../../icons/customIcons/icons/CheckboxIndeterminate.js';
+import '../../icons/customIcons/icons/Radio.js';
+import '../../icons/customIcons/icons/RadioChecked.js';
+import '../../icons/customIcons/icons/SimulFrac.js';
+import '../../icons/customIcons/icons/ZipperFrac.js';
+import '../../icons/customIcons/icons/CautionFilled.js';
+import '../../icons/customIcons/icons/MoreApp.js';
+import '../../icons/customIcons/icons/Pad.js';
+import '../../icons/customIcons/icons/Gap.js';
+import { getValidColor, getButtonStrokeColor, findParentBackground } from './ColorPicketUtils.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 useStyles = makeStyles({
+  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: '8px',
+    fontSize: '1rem'
+  },
+  buttonTransparent: {
+    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: '16px',
+    letterSpacing: '0.4px',
+    color: '#BDBDBD',
+    whiteSpace: 'nowrap'
+  },
+  rightLabel: {
+    marginLeft: '8px',
+    fontSize: '16px'
+  }
+});
+var ColorPicker = function ColorPicker(_ref) {
+  var _classNames, _classNames2;
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Color' : _ref$label,
+    value = _ref.value,
+    _ref$converter = _ref.converter,
+    converter = _ref$converter === void 0 ? 'rgba_hex' : _ref$converter,
+    onChange = _ref.onChange,
+    buttonClassName = _ref.buttonClassName,
+    _ref$popoverAnchorOri = _ref.popoverAnchorOrigin,
+    popoverAnchorOrigin = _ref$popoverAnchorOri === void 0 ? {
+      vertical: 'bottom',
+      horizontal: 'left'
+    } : _ref$popoverAnchorOri,
+    _ref$popoverTransform = _ref.popoverTransformOrigin,
+    popoverTransformOrigin = _ref$popoverTransform === void 0 ? {
+      vertical: 'top',
+      horizontal: 'left'
+    } : _ref$popoverTransform,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? 'top' : _ref$labelPosition,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+    _ref$pickerComponent = _ref.pickerComponent,
+    PickerComponent = _ref$pickerComponent === void 0 ? PaletteChromePicker : _ref$pickerComponent,
+    lensColor = _ref.lensColor,
+    _ref$enableTransparen = _ref.enableTransparencyPalette,
+    enableTransparencyPalette = _ref$enableTransparen === void 0 ? false : _ref$enableTransparen,
+    _ref$dataTestid = _ref['data-testid'],
+    PAGE_NAME = _ref$dataTestid === void 0 ? 'ColorPicker' : _ref$dataTestid,
+    _ref$tooltipProps = _ref.tooltipProps,
+    tooltipProps = _ref$tooltipProps === void 0 ? {
+      title: 'Change color',
+      children: null
+    } : _ref$tooltipProps;
+  var classes = useStyles();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var _useState3 = useState(function () {
+      return getValidColor(value) || DEFAULT_COLOR;
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    color = _useState4[0],
+    setColor = _useState4[1];
+  var popperInstanceRef = useRef();
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    backgroundColor = _useState6[0],
+    setBackgroundColor = _useState6[1];
+  var strokeColor = lensColor || getButtonStrokeColor(backgroundColor, color);
+  useEffect(function () {
+    var newColor = getValidColor(value);
+    if (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)),
+    ref: function ref(el) {
+      return setBackgroundColor(findParentBackground(el));
+    },
+    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.buttonTransparent, chroma(color).alpha() === 0)),
+        disableRipple: true,
+        style: {
+          backgroundColor: color,
+          color: strokeColor
+        },
+        onClick: handleOpen,
+        size: "small",
+        children: /*#__PURE__*/jsx(PaletteIcon, {
+          size: 16,
+          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
+      })
+    })]
+  });
+};
+
+export { ColorPicker as default };
+//# sourceMappingURL=ColorPicker.js.map

package/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { FC, useEffect, useRef, useState } from 'react';\nimport {\n  IconButton,\n  InputLabel,\n  makeStyles,\n  Popover,\n  PopoverActions,\n  PopoverOrigin,\n  Tooltip,\n  TooltipProps,\n} from '@material-ui/core';\nimport chroma from 'chroma-js';\nimport classNames from 'classnames';\n\nimport PaletteChromePicker from './PaletteChromePicker';\n\nimport Checkboard from '~/assets/checkboard.svg';\nimport { PaletteIcon } from '~/icons';\nimport { findParentBackground, getButtonStrokeColor, getValidColor } from './ColorPicketUtils';\n\nconst DEFAULT_COLOR = '#03BCD4';\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 useStyles = makeStyles({\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: '8px',\n    fontSize: '1rem',\n  },\n  buttonTransparent: {\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: '16px',\n    letterSpacing: '0.4px',\n    color: '#BDBDBD',\n    whiteSpace: 'nowrap',\n  },\n  rightLabel: {\n    marginLeft: '8px',\n    fontSize: '16px',\n  },\n});\n\ntype ColorPickerProps = {\n  label: string;\n  value: string;\n  onChange: (color: string) => void;\n  converter?: keyof typeof converters;\n  pickerComponent?: React.ComponentType<any>;\n  buttonClassName?: string;\n  labelPosition?: 'top' | 'right';\n  hideLabel?: boolean;\n  lensColor?: string;\n  enableTransparencyPalette?: boolean;\n  tooltipProps?: TooltipProps;\n  'data-testid'?: string;\n  popoverAnchorOrigin?: PopoverOrigin;\n  popoverTransformOrigin?: PopoverOrigin;\n};\n\nconst ColorPicker: FC<ColorPickerProps> = ({\n  label = 'Color',\n  value,\n  converter = 'rgba_hex',\n  onChange,\n  buttonClassName,\n  popoverAnchorOrigin = { vertical: 'bottom', horizontal: 'left' },\n  popoverTransformOrigin = { vertical: 'top', horizontal: 'left' },\n  labelPosition = 'top',\n  hideLabel = false,\n  pickerComponent: PickerComponent = PaletteChromePicker,\n  lensColor,\n  enableTransparencyPalette = false,\n  'data-testid': PAGE_NAME = 'ColorPicker',\n  tooltipProps = { title: 'Change color', children: null },\n}) => {\n  const classes = useStyles();\n  const [anchorEl, setAnchorEl] = useState(null);\n  const [color, setColor] = useState(() => getValidColor(value) || DEFAULT_COLOR);\n  const popperInstanceRef = useRef<PopoverActions>();\n  const [backgroundColor, setBackgroundColor] = useState(null);\n\n  const strokeColor = lensColor || getButtonStrokeColor(backgroundColor, color);\n\n  useEffect(() => {\n    const newColor = getValidColor(value);\n    if (newColor) setColor(newColor);\n    else console.error(`The color value(${value}) is not valid, please check it.`);\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      ref={el => setBackgroundColor(findParentBackground(el))}\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      <Tooltip title={tooltipProps.title} {...(tooltipProps as TooltipProps)}>\n        <IconButton\n          data-testid={`${PAGE_NAME}_icon_${label}`}\n          className={classNames(classes.button, buttonClassName, {\n            [classes.buttonTransparent]: chroma(color).alpha() === 0,\n          })}\n          disableRipple\n          style={{ backgroundColor: color, color: strokeColor }}\n          onClick={handleOpen}\n          size=\"small\"\n        >\n          <PaletteIcon size={16} className={classes.colorLensIcon} />\n        </IconButton>\n      </Tooltip>\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\nexport default ColorPicker;\n"],"names":["DEFAULT_COLOR","converters","rgba","c","rgb","r","g","b","a","hex","rgba_rgb","rgba_hex","useStyles","makeStyles","root","position","display","topLabelRoot","flexDirection","rightLabelRoot","justifyContent","alignItems","button","width","height","boxShadow","borderRadius","fontSize","buttonTransparent","backgroundImage","Checkboard","backgroundSize","backgroundPosition","content","background","transform","colorLensIcon","zIndex","popper","topLabel","marginBottom","lineHeight","letterSpacing","color","whiteSpace","rightLabel","marginLeft","ColorPicker","label","value","converter","onChange","buttonClassName","popoverAnchorOrigin","vertical","horizontal","popoverTransformOrigin","labelPosition","hideLabel","pickerComponent","PickerComponent","PaletteChromePicker","lensColor","enableTransparencyPalette","PAGE_NAME","tooltipProps","title","children","classes","useState","anchorEl","setAnchorEl","getValidColor","setColor","popperInstanceRef","useRef","backgroundColor","setBackgroundColor","strokeColor","getButtonStrokeColor","useEffect","newColor","console","error","handleOpen","e","currentTarget","handleClose","handleChange","nextColor","convertedColor","updatePopperPosition","current","updatePosition","_jsxs","classNames","el","findParentBackground","_jsx","chroma","alpha","Boolean"],"mappings":"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"}

package/components/ColorPicker/ColorPicketUtils.js

@@ -1 +1,41 @@
-import r from"chroma-js";import n from"validate-color";var t=function(r){for(var n=r;n;){var t=getComputedStyle(n).backgroundColor;if(t&&"transparent"!==t&&"rgba(0, 0, 0, 0)"!==t)return t;n=n.parentElement}},a=function(n,t){if(!t)return"#fff";var a=r(t),o=Number(r(a).alpha());return 0===o||r.mix(n||"#414141",a.alpha(1),o).luminance()>.7?"#000":"#fff"},o=function(r){var t=null==r?void 0:r.trim();return t&&n(t)?t:null};export{t as findParentBackground,a as getButtonStrokeColor,o as getValidColor};
+import chroma from 'chroma-js';
+import validateColor from 'validate-color';
+
+var DARK_STROKE_COLOR = '#000';
+var LIGHT_STROKE_COLOR = '#fff';
+var BUTTON_STROKE_COLOR_THRESHOLD = 0.7;
+// usual form color in dark theme
+var DEFAULT_BG_COLOR = '#414141';
+var findParentBackground = function findParentBackground(el) {
+  var currentEl = el;
+  while (currentEl) {
+    var bgColor = getComputedStyle(currentEl).backgroundColor;
+    if (bgColor && bgColor !== 'transparent' && bgColor !== 'rgba(0, 0, 0, 0)') {
+      return bgColor;
+    }
+    currentEl = currentEl.parentElement;
+  }
+};
+var getButtonStrokeColor = function getButtonStrokeColor(bgColor, buttonColor) {
+  if (!buttonColor) {
+    return LIGHT_STROKE_COLOR;
+  }
+  var color = chroma(buttonColor);
+  var buttonAlpha = Number(chroma(color).alpha());
+  if (buttonAlpha === 0) {
+    return DARK_STROKE_COLOR;
+  }
+  var realButtonColor = chroma.mix(bgColor || DEFAULT_BG_COLOR, color.alpha(1), buttonAlpha);
+  var tooBright = realButtonColor.luminance() > BUTTON_STROKE_COLOR_THRESHOLD;
+  return tooBright ? DARK_STROKE_COLOR : LIGHT_STROKE_COLOR;
+};
+var getValidColor = function getValidColor(color) {
+  var newColor = color === null || color === void 0 ? void 0 : color.trim();
+  if (newColor && validateColor(newColor)) {
+    return newColor;
+  }
+  return null;
+};
+
+export { findParentBackground, getButtonStrokeColor, getValidColor };
+//# sourceMappingURL=ColorPicketUtils.js.map

package/components/ColorPicker/ColorPicketUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicketUtils.js","sources":["../../../src/components/ColorPicker/ColorPicketUtils.ts"],"sourcesContent":["import chroma from 'chroma-js';\nimport validateColor from 'validate-color';\n\nconst DARK_STROKE_COLOR = '#000';\nconst LIGHT_STROKE_COLOR = '#fff';\nconst BUTTON_STROKE_COLOR_THRESHOLD = 0.7;\n// usual form color in dark theme\nconst DEFAULT_BG_COLOR = '#414141';\n\nexport const findParentBackground = (el: HTMLElement | null): string => {\n  let currentEl = el;\n  while (currentEl) {\n    const bgColor = getComputedStyle(currentEl).backgroundColor;\n    if (bgColor && bgColor !== 'transparent' && bgColor !== 'rgba(0, 0, 0, 0)') {\n      return bgColor;\n    }\n    currentEl = currentEl.parentElement;\n  }\n};\n\nexport const getButtonStrokeColor = (bgColor: string, buttonColor: string): string => {\n  if (!buttonColor) {\n    return LIGHT_STROKE_COLOR;\n  }\n\n  const color = chroma(buttonColor);\n\n  const buttonAlpha = Number(chroma(color).alpha());\n\n  if (buttonAlpha === 0) {\n    return DARK_STROKE_COLOR;\n  }\n\n  const realButtonColor = chroma.mix(bgColor || DEFAULT_BG_COLOR, color.alpha(1), buttonAlpha);\n  const tooBright = realButtonColor.luminance() > BUTTON_STROKE_COLOR_THRESHOLD;\n\n  return tooBright ? DARK_STROKE_COLOR : LIGHT_STROKE_COLOR;\n};\n\nexport const getValidColor = (color: string): string | null => {\n  const newColor = color?.trim();\n  if (newColor && validateColor(newColor)) {\n    return newColor;\n  }\n  return null;\n};\n"],"names":["DARK_STROKE_COLOR","LIGHT_STROKE_COLOR","BUTTON_STROKE_COLOR_THRESHOLD","DEFAULT_BG_COLOR","findParentBackground","el","currentEl","bgColor","getComputedStyle","backgroundColor","parentElement","getButtonStrokeColor","buttonColor","color","chroma","buttonAlpha","Number","alpha","realButtonColor","mix","tooBright","luminance","getValidColor","newColor","trim","validateColor"],"mappings":";;;AAGA,IAAMA,iBAAiB,GAAG,MAAM,CAAA;AAChC,IAAMC,kBAAkB,GAAG,MAAM,CAAA;AACjC,IAAMC,6BAA6B,GAAG,GAAG,CAAA;AACzC;AACA,IAAMC,gBAAgB,GAAG,SAAS,CAAA;IAErBC,oBAAoB,GAAG,SAAvBA,oBAAoB,CAAIC,EAAsB,EAAa;EACtE,IAAIC,SAAS,GAAGD,EAAE,CAAA;AAClB,EAAA,OAAOC,SAAS,EAAE;AAChB,IAAA,IAAMC,OAAO,GAAGC,gBAAgB,CAACF,SAAS,CAAC,CAACG,eAAe,CAAA;IAC3D,IAAIF,OAAO,IAAIA,OAAO,KAAK,aAAa,IAAIA,OAAO,KAAK,kBAAkB,EAAE;AAC1E,MAAA,OAAOA,OAAO,CAAA;AAChB,KAAA;IACAD,SAAS,GAAGA,SAAS,CAACI,aAAa,CAAA;AACrC,GAAA;AACF,EAAC;AAEM,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,CAAIJ,OAAe,EAAEK,WAAmB,EAAa;EACpF,IAAI,CAACA,WAAW,EAAE;AAChB,IAAA,OAAOX,kBAAkB,CAAA;AAC3B,GAAA;AAEA,EAAA,IAAMY,KAAK,GAAGC,MAAM,CAACF,WAAW,CAAC,CAAA;EAEjC,IAAMG,WAAW,GAAGC,MAAM,CAACF,MAAM,CAACD,KAAK,CAAC,CAACI,KAAK,EAAE,CAAC,CAAA;EAEjD,IAAIF,WAAW,KAAK,CAAC,EAAE;AACrB,IAAA,OAAOf,iBAAiB,CAAA;AAC1B,GAAA;AAEA,EAAA,IAAMkB,eAAe,GAAGJ,MAAM,CAACK,GAAG,CAACZ,OAAO,IAAIJ,gBAAgB,EAAEU,KAAK,CAACI,KAAK,CAAC,CAAC,CAAC,EAAEF,WAAW,CAAC,CAAA;AAC5F,EAAA,IAAMK,SAAS,GAAGF,eAAe,CAACG,SAAS,EAAE,GAAGnB,6BAA6B,CAAA;AAE7E,EAAA,OAAOkB,SAAS,GAAGpB,iBAAiB,GAAGC,kBAAkB,CAAA;AAC3D,EAAC;IAEYqB,aAAa,GAAG,SAAhBA,aAAa,CAAIT,KAAa,EAAoB;EAC7D,IAAMU,QAAQ,GAAGV,KAAK,KAAA,IAAA,IAALA,KAAK,KAALA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,KAAK,CAAEW,IAAI,EAAE,CAAA;AAC9B,EAAA,IAAID,QAAQ,IAAIE,aAAa,CAACF,QAAQ,CAAC,EAAE;AACvC,IAAA,OAAOA,QAAQ,CAAA;AACjB,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb;;;;"}

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

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

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 PAGE_NAME = 'ColorSquare';\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      data-testid={`${PAGE_NAME}_color_${color}_selected_${isSelected}`}\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":["PAGE_NAME","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":"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"}

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__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

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

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

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

@@ -1 +1,14 @@
-var F=["#8096A1","#CC3E20","#EE752F","#F9D649","#BBE749","#85D947","#5AC462","#51B6D1","#3C91E3","#3466F6","#5823E1","#9B2FF6","#B52C62","#C4D1D8","#EC4F27","#F19637","#FCE94F","#D2FC51","#9BFA4E","#69E282","#66E2FC","#4CAFF9","#3D7BF7","#5B33F5","#C336F0","#E1315A","#FFFFFF","#EE764E","#F4AE56","#FFFE55","#E4FD67","#C3FC73","#8EECB3","#76FCFD","#67C3FA","#548BF7","#7456F6","#CF54F3","#EC5281"],E="#00000000",C=F.map((function(F,E){return 0===E?"#00000000":F}));export{E as TRANSPARENT_HEX,F as paletteColors,C as paletteColorsWithTransparent};
+var paletteColors = [
+// row 1
+'#8096A1', '#CC3E20', '#EE752F', '#F9D649', '#BBE749', '#85D947', '#5AC462', '#51B6D1', '#3C91E3', '#3466F6', '#5823E1', '#9B2FF6', '#B52C62',
+// row 2
+'#C4D1D8', '#EC4F27', '#F19637', '#FCE94F', '#D2FC51', '#9BFA4E', '#69E282', '#66E2FC', '#4CAFF9', '#3D7BF7', '#5B33F5', '#C336F0', '#E1315A',
+// row 3
+'#FFFFFF', '#EE764E', '#F4AE56', '#FFFE55', '#E4FD67', '#C3FC73', '#8EECB3', '#76FCFD', '#67C3FA', '#548BF7', '#7456F6', '#CF54F3', '#EC5281'];
+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  '#8096A1',\n  '#CC3E20',\n  '#EE752F',\n  '#F9D649',\n  '#BBE749',\n  '#85D947',\n  '#5AC462',\n  '#51B6D1',\n  '#3C91E3',\n  '#3466F6',\n  '#5823E1',\n  '#9B2FF6',\n  '#B52C62',\n  // row 2\n  '#C4D1D8',\n  '#EC4F27',\n  '#F19637',\n  '#FCE94F',\n  '#D2FC51',\n  '#9BFA4E',\n  '#69E282',\n  '#66E2FC',\n  '#4CAFF9',\n  '#3D7BF7',\n  '#5B33F5',\n  '#C336F0',\n  '#E1315A',\n  // row 3\n  '#FFFFFF',\n  '#EE764E',\n  '#F4AE56',\n  '#FFFE55',\n  '#E4FD67',\n  '#C3FC73',\n  '#8EECB3',\n  '#76FCFD',\n  '#67C3FA',\n  '#548BF7',\n  '#7456F6',\n  '#CF54F3',\n  '#EC5281',\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":"AAAO,IAAMA,aAAa,GAAG;AAC3B;AACA,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS;AACT;AACA,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS;AACT;AACA,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACV;AAEM,IAAMC,eAAe,GAAG,YAAW;AAEnC,IAAMC,4BAA4B,GAAGF,aAAa,CAACG,GAAG,CAAC,UAACC,KAAK,EAAEC,CAAC,EAAK;AAC1E,EAAA,OAAOA,CAAC,KAAK,CAAC,GAAGJ,eAAe,GAAGG,KAAK,CAAA;AAC1C,CAAC;;;;"}