@corva/ui 3.1.0-rc.5 → 3.1.0

package/components/ColorPicker/ColorPicker.js

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

package/components/ColorPicker/ColorPicketUtils.js

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

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/PaletteConstants.js

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

package/components/ColorPicker/PaletteChromePicker/PaletteChromePicker.js

@@ -1,184 +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 } from '@material-ui/core';
-import Palette from './Palette/Palette.js';
-import IconButton from '../../IconButton/index.js';
-import { PaletteIcon, PickerIcon } 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 { 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)',
-    paddingBottom: '8px',
-    borderRadius: '4px',
-    width: '250px',
-    '& input': {
-      border: '1px solid #616161 !important',
-      backgroundColor: '#3b3b3b',
-      color: '#fff !important',
-      boxShadow: 'none !important',
-      outline: 'none'
-    }
-  },
-  chromePickerPalette: {
-    margin: '0 8px',
-    paddingTop: '8px'
-  },
-  buttonsContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-    marginTop: '8px'
-  },
-  iconActive: {
-    color: '#fff'
-  },
-  tooltip: {
-    background: '#414141',
-    color: '#fff',
-    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.12)',
-    borderRadius: '4px',
-    opacity: 1,
-    fontSize: '11px'
-  }
-});
-
-// ⚠️⚠️⚠️ Mentioned in storybook, please update when editing these types
-
-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.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)),
-            size: 24
-          })
-        })
-      }), /*#__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(PickerIcon, {
-            className: classNames( /* classes.icon, */_defineProperty({}, classes.iconActive, pickMode === COLOR_PICK_MODE.CHROME_PICKER)),
-            size: 24
-          })
-        })
-      })]
-    })]
-  });
-});
-
-export { PaletteChromePicker as default };
-//# sourceMappingURL=PaletteChromePicker.js.map
+import{jsxs as o,jsx as s}from"react/jsx-runtime";import{forwardRef as i,useState as c,useLayoutEffect as n}from"react";import{ChromePicker as t}from"react-color";import e from"classnames";import{makeStyles as r,Tooltip as a}from"@material-ui/core";import p from"./Palette/Palette.js";import m from"../../IconButton/index.js";import{PaletteIcon as l,PickerIcon as d}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";var u="PALETTE",h="CHROME_PICKER",b={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"}}}},x=r({container:{backgroundColor:"#3b3b3b",boxShadow:"0px 3px 10px rgba(0, 0, 0, 0.4)",paddingBottom:"8px",borderRadius:"4px",width:"250px","& input":{border:"1px solid #616161 !important",backgroundColor:"#3b3b3b",color:"#fff !important",boxShadow:"none !important",outline:"none"}},chromePickerPalette:{margin:"0 8px",paddingTop:"8px"},buttonsContainer:{display:"flex",justifyContent:"center",marginTop:"8px"},iconActive:{color:"#fff"},tooltip:{background:"#414141",color:"#fff",boxShadow:"0px 4px 4px rgba(0, 0, 0, 0.12)",borderRadius:"4px",opacity:1,fontSize:"11px"}}),f=i((function(i,r){var f,j,I=i.color,C=i.onChange,g=i.onSizeChange,k=i.enableTransparencyPalette,P=x(),w=c(u),y=w[0],R=w[1];return n(g,[y]),o("div",{className:P.container,ref:r,children:[y===u&&s(p,{className:P.chromePickerPalette,color:I,onChange:C,enableTransparencyPalette:k}),y===h&&s(t,{styles:b,color:I,onChange:C}),o("div",{className:P.buttonsContainer,children:[s(a,{title:"Palette",classes:{tooltip:P.tooltip},children:s(m,{"data-testid":"".concat("PaletteChromePicker","_palette"),onClick:function(){return R(u)},children:s(l,{className:e((f={},f[P.iconActive]=y===u,f)),size:24})})}),s(a,{title:"Pick your own",classes:{tooltip:P.tooltip},children:s(m,{"data-testid":"".concat("PaletteChromePicker","_pickOwn"),onClick:function(){return R(h)},children:s(d,{className:e((j={},j[P.iconActive]=y===h,j)),size:24})})})]})]})}));export{f as default};