@feathery/react 2.12.3-pr-1522.4bcc507.0 → 2.14.0

package/dist/esm/fthry_index.pN448hs2.js

@@ -1,1159 +0,0 @@
-import { _ as __read, j as jsxs$1, a as __assign, b as jsx$1, k as FORM_Z_INDEX } from './fthry_index.ChZdNtIX.js';
-import React__default, { useRef, useEffect, useCallback, useState, useMemo, Fragment } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import 'react-dom/client';
-import 'jszip';
-import 'react-dom';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-var RGB_MAX = 255;
-var SV_MAX = 100;
-/**
- * ```js
- * rgbaToHsva({ r: 255, g: 255, b: 255, a: 1 }) //=> { h: 0, s: 0, v: 100, a: 1 }
- * ```
- */
-var rgbaToHsva = _ref => {
-  var {
-    r,
-    g,
-    b,
-    a
-  } = _ref;
-  var max = Math.max(r, g, b);
-  var delta = max - Math.min(r, g, b);
-
-  // prettier-ignore
-  var hh = delta ? max === r ? (g - b) / delta : max === g ? 2 + (b - r) / delta : 4 + (r - g) / delta : 0;
-  return {
-    h: 60 * (hh < 0 ? hh + 6 : hh),
-    s: max ? delta / max * SV_MAX : 0,
-    v: max / RGB_MAX * SV_MAX,
-    a
-  };
-};
-var hsvaToHslaString = hsva => {
-  var {
-    h,
-    s,
-    l,
-    a
-  } = hsvaToHsla(hsva);
-  return "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")";
-};
-var hsvaToHsla = _ref5 => {
-  var {
-    h,
-    s,
-    v,
-    a
-  } = _ref5;
-  var hh = (200 - s) * v / SV_MAX;
-  return {
-    h,
-    s: hh > 0 && hh < 200 ? s * v / SV_MAX / (hh <= SV_MAX ? hh : 200 - hh) * SV_MAX : 0,
-    l: hh / 2,
-    a
-  };
-};
-var rgbToHex = _ref7 => {
-  var {
-    r,
-    g,
-    b
-  } = _ref7;
-  var bin = r << 16 | g << 8 | b;
-  return "#" + (h => new Array(7 - h.length).join('0') + h)(bin.toString(16));
-};
-var rgbaToHexa = _ref8 => {
-  var {
-    r,
-    g,
-    b,
-    a
-  } = _ref8;
-  var alpha = typeof a === 'number' && (a * 255 | 1 << 8).toString(16).slice(1);
-  return "" + rgbToHex({
-    r,
-    g,
-    b
-  }) + (alpha ? alpha : '');
-};
-var hexToHsva = hex => rgbaToHsva(hexToRgba(hex));
-var hexToRgba = hex => {
-  var htemp = hex.replace('#', '');
-  if (/^#?/.test(hex) && htemp.length === 3) {
-    hex = "#" + htemp.charAt(0) + htemp.charAt(0) + htemp.charAt(1) + htemp.charAt(1) + htemp.charAt(2) + htemp.charAt(2);
-  }
-  var reg = new RegExp("[A-Za-z0-9]{2}", 'g');
-  var [r, g, b = 0, a] = hex.match(reg).map(v => parseInt(v, 16));
-  return {
-    r,
-    g,
-    b,
-    a: (a != null ? a : 255) / RGB_MAX
-  };
-};
-
-/**
- * Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
- * @param color HSVA color as an array [0-360, 0-1, 0-1, 0-1]
- */
-var hsvaToRgba = _ref9 => {
-  var {
-    h,
-    s,
-    v,
-    a
-  } = _ref9;
-  var _h = h / 60,
-    _s = s / SV_MAX,
-    _v = v / SV_MAX,
-    hi = Math.floor(_h) % 6;
-  var f = _h - Math.floor(_h),
-    _p = RGB_MAX * _v * (1 - _s),
-    _q = RGB_MAX * _v * (1 - _s * f),
-    _t = RGB_MAX * _v * (1 - _s * (1 - f));
-  _v *= RGB_MAX;
-  var rgba = {};
-  switch (hi) {
-    case 0:
-      rgba.r = _v;
-      rgba.g = _t;
-      rgba.b = _p;
-      break;
-    case 1:
-      rgba.r = _q;
-      rgba.g = _v;
-      rgba.b = _p;
-      break;
-    case 2:
-      rgba.r = _p;
-      rgba.g = _v;
-      rgba.b = _t;
-      break;
-    case 3:
-      rgba.r = _p;
-      rgba.g = _q;
-      rgba.b = _v;
-      break;
-    case 4:
-      rgba.r = _t;
-      rgba.g = _p;
-      rgba.b = _v;
-      break;
-    case 5:
-      rgba.r = _v;
-      rgba.g = _p;
-      rgba.b = _q;
-      break;
-  }
-  rgba.r = Math.round(rgba.r);
-  rgba.g = Math.round(rgba.g);
-  rgba.b = Math.round(rgba.b);
-  return _extends({}, rgba, {
-    a
-  });
-};
-var hsvaToRgbaString = hsva => {
-  var {
-    r,
-    g,
-    b,
-    a
-  } = hsvaToRgba(hsva);
-  return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
-};
-var rgbaToRgb = _ref0 => {
-  var {
-    r,
-    g,
-    b
-  } = _ref0;
-  return {
-    r,
-    g,
-    b
-  };
-};
-var hslaToHsl = _ref1 => {
-  var {
-    h,
-    s,
-    l
-  } = _ref1;
-  return {
-    h,
-    s,
-    l
-  };
-};
-var hsvaToHex = hsva => rgbToHex(hsvaToRgba(hsva));
-var hsvaToHsv = _ref10 => {
-  var {
-    h,
-    s,
-    v
-  } = _ref10;
-  return {
-    h,
-    s,
-    v
-  };
-};
-
-/**
- * Converts RGB to XY. Based on formula from https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/
- * @param color RGB color as an array [0-255, 0-255, 0-255]
- */
-var rgbToXY = _ref12 => {
-  var {
-    r,
-    g,
-    b
-  } = _ref12;
-  var translateColor = function translateColor(color) {
-    return color <= 0.04045 ? color / 12.92 : Math.pow((color + 0.055) / 1.055, 2.4);
-  };
-  var red = translateColor(r / 255);
-  var green = translateColor(g / 255);
-  var blue = translateColor(b / 255);
-  var xyz = {};
-  xyz.x = red * 0.4124 + green * 0.3576 + blue * 0.1805;
-  xyz.y = red * 0.2126 + green * 0.7152 + blue * 0.0722;
-  xyz.bri = red * 0.0193 + green * 0.1192 + blue * 0.9505;
-  return xyz;
-};
-var color = str => {
-  var rgb;
-  var hsl;
-  var hsv;
-  var rgba;
-  var hsla;
-  var hsva;
-  var xy;
-  var hex;
-  var hexa;
-  if (typeof str === 'string' && validHex$1(str)) {
-    hsva = hexToHsva(str);
-    hex = str;
-  } else if (typeof str !== 'string') {
-    hsva = str;
-  }
-  if (hsva) {
-    hsv = hsvaToHsv(hsva);
-    hsla = hsvaToHsla(hsva);
-    rgba = hsvaToRgba(hsva);
-    hexa = rgbaToHexa(rgba);
-    hex = hsvaToHex(hsva);
-    hsl = hslaToHsl(hsla);
-    rgb = rgbaToRgb(rgba);
-    xy = rgbToXY(rgb);
-  }
-  return {
-    rgb,
-    hsl,
-    hsv,
-    rgba,
-    hsla,
-    hsva,
-    hex,
-    hexa,
-    xy
-  };
-};
-var validHex$1 = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
-
-// Saves incoming handler to the ref in order to avoid "useCallback hell"
-function useEventCallback(handler) {
-  var callbackRef = useRef(handler);
-  useEffect(() => {
-    callbackRef.current = handler;
-  });
-  return useCallback((value, event) => callbackRef.current && callbackRef.current(value, event), []);
-}
-
-// Check if an event was triggered by touch
-var isTouch = event => 'touches' in event;
-
-// Browsers introduced an intervention, making touch events passive by default.
-// This workaround removes `preventDefault` call from the touch handlers.
-// https://github.com/facebook/react/issues/19651
-var preventDefaultMove = event => {
-  !isTouch(event) && event.preventDefault && event.preventDefault();
-};
-// Clamps a value between an upper and lower bound.
-// We use ternary operators because it makes the minified code
-// 2 times shorter then `Math.min(Math.max(a,b),c)`
-var clamp = function clamp(number, min, max) {
-  if (min === void 0) {
-    min = 0;
-  }
-  if (max === void 0) {
-    max = 1;
-  }
-  return number > max ? max : number < min ? min : number;
-};
-// Returns a relative position of the pointer inside the node's bounding box
-var getRelativePosition = (node, event) => {
-  var rect = node.getBoundingClientRect();
-
-  // Get user's pointer position from `touches` array if it's a `TouchEvent`
-  var pointer = isTouch(event) ? event.touches[0] : event;
-  return {
-    left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
-    top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),
-    width: rect.width,
-    height: rect.height,
-    x: pointer.pageX - (rect.left + window.pageXOffset),
-    y: pointer.pageY - (rect.top + window.pageYOffset)
-  };
-};
-
-var _excluded$8 = ["prefixCls", "className", "onMove", "onDown"];
-var Interactive = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-interactive',
-      className,
-      onMove,
-      onDown
-    } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded$8);
-  var container = useRef(null);
-  var hasTouched = useRef(false);
-  var [isDragging, setDragging] = useState(false);
-  var onMoveCallback = useEventCallback(onMove);
-  var onKeyCallback = useEventCallback(onDown);
-
-  // Prevent mobile browsers from handling mouse events (conflicting with touch ones).
-  // If we detected a touch interaction before, we prefer reacting to touch events only.
-  var isValid = event => {
-    if (hasTouched.current && !isTouch(event)) return false;
-    hasTouched.current = isTouch(event);
-    return true;
-  };
-  var handleMove = useCallback(event => {
-    preventDefaultMove(event);
-    if (!container.current) return;
-    var isDown = isTouch(event) ? event.touches.length > 0 : event.buttons > 0;
-    if (!isDown) {
-      setDragging(false);
-      return;
-    }
-    onMoveCallback == null || onMoveCallback(getRelativePosition(container.current, event), event);
-  }, [onMoveCallback]);
-  var handleMoveEnd = useCallback(() => setDragging(false), []);
-  var toggleDocumentEvents = useCallback(state => {
-    if (state) {
-      window.addEventListener(hasTouched.current ? 'touchmove' : 'mousemove', handleMove);
-      window.addEventListener(hasTouched.current ? 'touchend' : 'mouseup', handleMoveEnd);
-    } else {
-      window.removeEventListener('mousemove', handleMove);
-      window.removeEventListener('mouseup', handleMoveEnd);
-      window.removeEventListener('touchmove', handleMove);
-      window.removeEventListener('touchend', handleMoveEnd);
-    }
-  }, [handleMove, handleMoveEnd]);
-  useEffect(() => {
-    toggleDocumentEvents(isDragging);
-    return () => {
-      toggleDocumentEvents(false);
-    };
-  }, [isDragging, handleMove, handleMoveEnd, toggleDocumentEvents]);
-  var handleMoveStart = useCallback(event => {
-    preventDefaultMove(event.nativeEvent);
-    if (!isValid(event.nativeEvent)) return;
-    if (!container.current) return;
-    onKeyCallback == null || onKeyCallback(getRelativePosition(container.current, event.nativeEvent), event.nativeEvent);
-    setDragging(true);
-  }, [onKeyCallback]);
-  return /*#__PURE__*/jsx("div", _extends({}, reset, {
-    className: [prefixCls, className || ''].filter(Boolean).join(' '),
-    style: _extends({}, reset.style, {
-      touchAction: 'none'
-    }),
-    ref: container,
-    tabIndex: 0,
-    onMouseDown: handleMoveStart,
-    onTouchStart: handleMoveStart
-  }));
-});
-Interactive.displayName = 'Interactive';
-
-var Pointer$1 = _ref => {
-  var {
-    className,
-    color,
-    left,
-    top,
-    prefixCls
-  } = _ref;
-  var style = {
-    position: 'absolute',
-    top,
-    left
-  };
-  var stylePointer = {
-    '--saturation-pointer-box-shadow': 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px',
-    width: 6,
-    height: 6,
-    transform: 'translate(-3px, -3px)',
-    boxShadow: 'var(--saturation-pointer-box-shadow)',
-    borderRadius: '50%',
-    backgroundColor: color
-  };
-  return useMemo(() => /*#__PURE__*/jsx("div", {
-    className: prefixCls + "-pointer " + (className || ''),
-    style: style,
-    children: /*#__PURE__*/jsx("div", {
-      className: prefixCls + "-fill",
-      style: stylePointer
-    })
-  }), [top, left, color, className, prefixCls]);
-};
-
-var _excluded$7 = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
-var Saturation = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var _hsva$h;
-  var {
-      prefixCls = 'w-color-saturation',
-      radius = 0,
-      pointer,
-      className,
-      hue = 0,
-      style,
-      hsva,
-      onChange
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$7);
-  var containerStyle = _extends({
-    width: 200,
-    height: 200,
-    borderRadius: radius
-  }, style, {
-    position: 'relative'
-  });
-  var handleChange = (interaction, event) => {
-    onChange && hsva && onChange({
-      h: hsva.h,
-      s: interaction.left * 100,
-      v: (1 - interaction.top) * 100,
-      a: hsva.a
-      // source: 'hsv',
-    });
-  };
-  var pointerElement = useMemo(() => {
-    if (!hsva) return null;
-    var comProps = {
-      top: 100 - hsva.v + "%",
-      left: hsva.s + "%",
-      color: hsvaToHslaString(hsva)
-    };
-    if (pointer && typeof pointer === 'function') {
-      return pointer(_extends({
-        prefixCls
-      }, comProps));
-    }
-    return /*#__PURE__*/jsx(Pointer$1, _extends({
-      prefixCls: prefixCls
-    }, comProps));
-  }, [hsva, pointer, prefixCls]);
-  return /*#__PURE__*/jsx(Interactive, _extends({
-    className: [prefixCls, className || ''].filter(Boolean).join(' ')
-  }, other, {
-    style: _extends({
-      position: 'absolute',
-      inset: 0,
-      cursor: 'crosshair',
-      backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(" + ((_hsva$h = hsva == null ? void 0 : hsva.h) != null ? _hsva$h : hue) + ", 100%, 50%))"
-    }, containerStyle),
-    ref: ref,
-    onMove: handleChange,
-    onDown: handleChange,
-    children: pointerElement
-  }));
-});
-Saturation.displayName = 'Saturation';
-
-var _excluded$6 = ["className", "prefixCls", "left", "top", "style", "fillProps"];
-var Pointer = _ref => {
-  var {
-      className,
-      prefixCls,
-      left,
-      top,
-      style,
-      fillProps
-    } = _ref,
-    reset = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  var styleWrapper = _extends({}, style, {
-    position: 'absolute',
-    left,
-    top
-  });
-  var stylePointer = _extends({
-    width: 18,
-    height: 18,
-    boxShadow: 'var(--alpha-pointer-box-shadow)',
-    borderRadius: '50%',
-    backgroundColor: 'var(--alpha-pointer-background-color)'
-  }, fillProps == null ? void 0 : fillProps.style, {
-    transform: left ? 'translate(-9px, -1px)' : 'translate(-1px, -9px)'
-  });
-  return /*#__PURE__*/jsx("div", _extends({
-    className: prefixCls + "-pointer " + (className || ''),
-    style: styleWrapper
-  }, reset, {
-    children: /*#__PURE__*/jsx("div", _extends({
-      className: prefixCls + "-fill"
-    }, fillProps, {
-      style: stylePointer
-    }))
-  }));
-};
-
-var _excluded$5 = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"];
-var BACKGROUND_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==';
-var Alpha = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-alpha',
-      className,
-      hsva,
-      background,
-      bgProps = {},
-      innerProps = {},
-      pointerProps = {},
-      radius = 0,
-      width,
-      height = 16,
-      direction = 'horizontal',
-      style,
-      onChange,
-      pointer
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$5);
-  var handleChange = offset => {
-    onChange && onChange(_extends({}, hsva, {
-      a: direction === 'horizontal' ? offset.left : offset.top
-    }), offset);
-  };
-  var colorTo = hsvaToHslaString(Object.assign({}, hsva, {
-    a: 1
-  }));
-  var innerBackground = "linear-gradient(to " + (direction === 'horizontal' ? 'right' : 'bottom') + ", rgba(244, 67, 54, 0) 0%, " + colorTo + " 100%)";
-  var comProps = {};
-  if (direction === 'horizontal') {
-    comProps.left = hsva.a * 100 + "%";
-  } else {
-    comProps.top = hsva.a * 100 + "%";
-  }
-  var styleWrapper = _extends({
-    '--alpha-background-color': '#fff',
-    '--alpha-pointer-background-color': 'rgb(248, 248, 248)',
-    '--alpha-pointer-box-shadow': 'rgb(0 0 0 / 37%) 0px 1px 4px 0px',
-    borderRadius: radius,
-    background: "url(" + BACKGROUND_IMG + ") left center",
-    backgroundColor: 'var(--alpha-background-color)'
-  }, {
-    width,
-    height
-  }, style, {
-    position: 'relative'
-  });
-  var pointerElement = pointer && typeof pointer === 'function' ? pointer(_extends({
-    prefixCls
-  }, pointerProps, comProps)) : /*#__PURE__*/jsx(Pointer, _extends({}, pointerProps, {
-    prefixCls: prefixCls
-  }, comProps));
-  return /*#__PURE__*/jsxs("div", _extends({}, other, {
-    className: [prefixCls, prefixCls + "-" + direction, className || ''].filter(Boolean).join(' '),
-    style: styleWrapper,
-    ref: ref,
-    children: [/*#__PURE__*/jsx("div", _extends({}, bgProps, {
-      style: _extends({
-        inset: 0,
-        position: 'absolute',
-        background: background || innerBackground,
-        borderRadius: radius
-      }, bgProps.style)
-    })), /*#__PURE__*/jsx(Interactive, _extends({}, innerProps, {
-      style: _extends({}, innerProps.style, {
-        inset: 0,
-        zIndex: 1,
-        position: 'absolute'
-      }),
-      onMove: handleChange,
-      onDown: handleChange,
-      children: pointerElement
-    }))]
-  }));
-});
-Alpha.displayName = 'Alpha';
-
-var _excluded$4 = ["prefixCls", "placement", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange", "onBlur", "renderInput"];
-var validHex = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
-var getNumberValue = value => Number(String(value).replace(/%/g, ''));
-var EditableInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-editable-input',
-      placement = 'bottom',
-      label,
-      value: initValue,
-      className,
-      style,
-      labelStyle,
-      inputStyle,
-      onChange,
-      onBlur,
-      renderInput
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$4);
-  var [value, setValue] = useState(initValue);
-  var isFocus = useRef(false);
-  useEffect(() => {
-    if (props.value !== value) {
-      if (!isFocus.current) {
-        setValue(props.value);
-      }
-    }
-  }, [props.value]);
-  function handleChange(evn, valInit) {
-    var value = (valInit || evn.target.value).trim().replace(/^#/, '');
-    if (validHex(value)) {
-      onChange && onChange(evn, value);
-    }
-    var val = getNumberValue(value);
-    if (!isNaN(val)) {
-      onChange && onChange(evn, val);
-    }
-    setValue(value);
-  }
-  function handleBlur(evn) {
-    isFocus.current = false;
-    setValue(props.value);
-    onBlur && onBlur(evn);
-  }
-  var placementStyle = {};
-  if (placement === 'bottom') {
-    placementStyle['flexDirection'] = 'column';
-  }
-  if (placement === 'top') {
-    placementStyle['flexDirection'] = 'column-reverse';
-  }
-  if (placement === 'left') {
-    placementStyle['flexDirection'] = 'row-reverse';
-  }
-  var wrapperStyle = _extends({
-    '--editable-input-label-color': 'rgb(153, 153, 153)',
-    '--editable-input-box-shadow': 'rgb(204 204 204) 0px 0px 0px 1px inset',
-    '--editable-input-color': '#666',
-    position: 'relative',
-    alignItems: 'center',
-    display: 'flex',
-    fontSize: 11
-  }, placementStyle, style);
-  var editableStyle = _extends({
-    width: '100%',
-    paddingTop: 2,
-    paddingBottom: 2,
-    paddingLeft: 3,
-    paddingRight: 3,
-    fontSize: 11,
-    background: 'transparent',
-    boxSizing: 'border-box',
-    border: 'none',
-    color: 'var(--editable-input-color)',
-    boxShadow: 'var(--editable-input-box-shadow)'
-  }, inputStyle);
-  var inputProps = _extends({
-    value,
-    onChange: handleChange,
-    onBlur: handleBlur,
-    autoComplete: 'off',
-    onFocus: () => isFocus.current = true
-  }, other, {
-    style: editableStyle
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: [prefixCls, className || ''].filter(Boolean).join(' '),
-    style: wrapperStyle,
-    children: [renderInput ? renderInput(inputProps, ref) : /*#__PURE__*/jsx("input", _extends({
-      ref: ref
-    }, inputProps)), label && /*#__PURE__*/jsx("span", {
-      style: _extends({
-        color: 'var(--editable-input-label-color)',
-        textTransform: 'capitalize'
-      }, labelStyle),
-      children: label
-    })]
-  });
-});
-EditableInput.displayName = 'EditableInput';
-
-var _excluded$3 = ["prefixCls", "hsva", "placement", "rProps", "gProps", "bProps", "aProps", "className", "style", "onChange"];
-var EditableInputRGBA = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-editable-input-rgba',
-      hsva,
-      placement = 'bottom',
-      rProps = {},
-      gProps = {},
-      bProps = {},
-      aProps = {},
-      className,
-      style,
-      onChange
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3);
-  var rgba = hsva ? hsvaToRgba(hsva) : {};
-  function handleBlur(evn) {
-    var value = Number(evn.target.value);
-    if (value && value > 255) {
-      evn.target.value = '255';
-    }
-    if (value && value < 0) {
-      evn.target.value = '0';
-    }
-  }
-  var handleChange = (value, type, evn) => {
-    if (typeof value === 'number') {
-      if (type === 'a') {
-        if (value < 0) value = 0;
-        if (value > 100) value = 100;
-        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
-          a: value / 100
-        }))));
-      }
-      if (value > 255) {
-        value = 255;
-        evn.target.value = '255';
-      }
-      if (value < 0) {
-        value = 0;
-        evn.target.value = '0';
-      }
-      if (type === 'r') {
-        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
-          r: value
-        }))));
-      }
-      if (type === 'g') {
-        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
-          g: value
-        }))));
-      }
-      if (type === 'b') {
-        onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
-          b: value
-        }))));
-      }
-    }
-  };
-  return /*#__PURE__*/jsxs("div", _extends({
-    ref: ref,
-    className: [prefixCls, className || ''].filter(Boolean).join(' ')
-  }, other, {
-    style: _extends({
-      fontSize: 11,
-      display: 'flex'
-    }, style),
-    children: [/*#__PURE__*/jsx(EditableInput, _extends({
-      label: "R",
-      value: rgba.r || 0,
-      onBlur: handleBlur,
-      placement: placement,
-      onChange: (evn, val) => handleChange(val, 'r', evn)
-    }, rProps, {
-      style: _extends({}, rProps.style)
-    })), /*#__PURE__*/jsx(EditableInput, _extends({
-      label: "G",
-      value: rgba.g || 0,
-      onBlur: handleBlur,
-      placement: placement,
-      onChange: (evn, val) => handleChange(val, 'g', evn)
-    }, gProps, {
-      style: _extends({
-        marginLeft: 5
-      }, rProps.style)
-    })), /*#__PURE__*/jsx(EditableInput, _extends({
-      label: "B",
-      value: rgba.b || 0,
-      onBlur: handleBlur,
-      placement: placement,
-      onChange: (evn, val) => handleChange(val, 'b', evn)
-    }, bProps, {
-      style: _extends({
-        marginLeft: 5
-      }, bProps.style)
-    })), aProps && /*#__PURE__*/jsx(EditableInput, _extends({
-      label: "A",
-      value: rgba.a ? parseInt(String(rgba.a * 100), 10) : 0,
-      onBlur: handleBlur,
-      placement: placement,
-      onChange: (evn, val) => handleChange(val, 'a', evn)
-    }, aProps, {
-      style: _extends({
-        marginLeft: 5
-      }, aProps.style)
-    }))]
-  }));
-});
-EditableInputRGBA.displayName = 'EditableInputRGBA';
-
-var _excluded$2 = ["prefixCls", "className", "hue", "onChange", "direction"];
-var Hue = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-hue',
-      className,
-      hue = 0,
-      onChange: _onChange,
-      direction = 'horizontal'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$2);
-  return /*#__PURE__*/jsx(Alpha, _extends({
-    ref: ref,
-    className: prefixCls + " " + (className || '')
-  }, other, {
-    direction: direction,
-    background: "linear-gradient(to " + (direction === 'horizontal' ? 'right' : 'bottom') + ", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
-    hsva: {
-      h: hue,
-      s: 100,
-      v: 100,
-      a: hue / 360
-    },
-    onChange: (_, interaction) => {
-      _onChange && _onChange({
-        h: direction === 'horizontal' ? 360 * interaction.left : 360 * interaction.top
-      });
-    }
-  }));
-});
-Hue.displayName = 'Hue';
-
-var _excluded$1 = ["prefixCls", "className", "color", "colors", "style", "rectProps", "onChange", "addonAfter", "addonBefore", "rectRender"];
-var Swatch = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-swatch',
-      className,
-      color: color$1,
-      colors = [],
-      style,
-      rectProps = {},
-      onChange,
-      addonAfter,
-      addonBefore,
-      rectRender
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1);
-  var rectStyle = _extends({
-    '--swatch-background-color': 'rgb(144, 19, 254)',
-    background: 'var(--swatch-background-color)',
-    height: 15,
-    width: 15,
-    marginRight: 5,
-    marginBottom: 5,
-    cursor: 'pointer',
-    position: 'relative',
-    outline: 'none',
-    borderRadius: 2
-  }, rectProps.style);
-  var handleClick = (hex, evn) => {
-    onChange && onChange(hexToHsva(hex), color(hexToHsva(hex)), evn);
-  };
-  return /*#__PURE__*/jsxs("div", _extends({
-    ref: ref
-  }, other, {
-    className: [prefixCls, className || ''].filter(Boolean).join(' '),
-    style: _extends({
-      display: 'flex',
-      flexWrap: 'wrap',
-      position: 'relative'
-    }, style),
-    children: [addonBefore && /*#__PURE__*/React__default.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
-      var title = '';
-      var background = '';
-      if (typeof item === 'string') {
-        title = item;
-        background = item;
-      }
-      if (typeof item === 'object' && item.color) {
-        title = item.title || item.color;
-        background = item.color;
-      }
-      var checked = color$1 && color$1.toLocaleLowerCase() === background.toLocaleLowerCase();
-      var render = rectRender && rectRender({
-        title,
-        color: background,
-        checked: !!checked,
-        style: _extends({}, rectStyle, {
-          background
-        }),
-        onClick: evn => handleClick(background, evn)
-      });
-      if (render) {
-        return /*#__PURE__*/jsx(Fragment, {
-          children: render
-        }, idx);
-      }
-      var child = rectProps.children && /*#__PURE__*/React__default.isValidElement(rectProps.children) ? /*#__PURE__*/React__default.cloneElement(rectProps.children, {
-        color: background,
-        checked
-      }) : null;
-      return /*#__PURE__*/jsx("div", _extends({
-        tabIndex: 0,
-        title: title,
-        onClick: evn => handleClick(background, evn)
-      }, rectProps, {
-        children: child,
-        style: _extends({}, rectStyle, {
-          background
-        })
-      }), idx);
-    }), addonAfter && /*#__PURE__*/React__default.isValidElement(addonAfter) && addonAfter]
-  }));
-});
-Swatch.displayName = 'Swatch';
-
-var _excluded = ["prefixCls", "className", "onChange", "width", "presetColors", "color", "editableDisable", "disableAlpha", "style"];
-var PRESET_COLORS = ['#D0021B', '#F5A623', '#f8e61b', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'];
-var Bar = props => /*#__PURE__*/jsx("div", {
-  style: {
-    boxShadow: 'rgb(0 0 0 / 60%) 0px 0px 2px',
-    width: 4,
-    top: 1,
-    bottom: 1,
-    left: props.left,
-    borderRadius: 1,
-    position: 'absolute',
-    backgroundColor: '#fff'
-  }
-});
-var Sketch = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var {
-      prefixCls = 'w-color-sketch',
-      className,
-      onChange,
-      width = 218,
-      presetColors = PRESET_COLORS,
-      color: color$1,
-      editableDisable = true,
-      disableAlpha = false,
-      style
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  var [hsva, setHsva] = useState({
-    h: 209,
-    s: 36,
-    v: 90,
-    a: 1
-  });
-  useEffect(() => {
-    if (typeof color$1 === 'string' && validHex$1(color$1)) {
-      setHsva(hexToHsva(color$1));
-    }
-    if (typeof color$1 === 'object') {
-      setHsva(color$1);
-    }
-  }, [color$1]);
-  var handleChange = hsv => {
-    setHsva(hsv);
-    onChange && onChange(color(hsv));
-  };
-  var handleHex = (value, evn) => {
-    if (typeof value === 'string' && validHex$1(value) && /(3|6)/.test(String(value.length))) {
-      handleChange(hexToHsva(value));
-    }
-  };
-  var handleAlphaChange = newAlpha => handleChange(_extends({}, hsva, {
-    a: newAlpha.a
-  }));
-  var handleSaturationChange = newColor => handleChange(_extends({}, hsva, newColor, {
-    a: hsva.a
-  }));
-  var styleMain = _extends({
-    '--sketch-background': 'rgb(255, 255, 255)',
-    '--sketch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
-    '--sketch-swatch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset',
-    '--sketch-alpha-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset',
-    '--sketch-swatch-border-top': '1px solid rgb(238, 238, 238)',
-    background: 'var(--sketch-background)',
-    borderRadius: 4,
-    boxShadow: 'var(--sketch-box-shadow)',
-    width
-  }, style);
-  var styleAlpha = {
-    borderRadius: 2,
-    background: hsvaToRgbaString(hsva),
-    boxShadow: 'var(--sketch-alpha-box-shadow)'
-  };
-  var styleSwatch = {
-    borderTop: 'var(--sketch-swatch-border-top)',
-    paddingTop: 10,
-    paddingLeft: 10
-  };
-  var styleSwatchRect = {
-    marginRight: 10,
-    marginBottom: 10,
-    borderRadius: 3,
-    boxShadow: 'var(--sketch-swatch-box-shadow)'
-  };
-  return /*#__PURE__*/jsxs("div", _extends({}, other, {
-    className: prefixCls + " " + (className || ''),
-    ref: ref,
-    style: styleMain,
-    children: [/*#__PURE__*/jsxs("div", {
-      style: {
-        padding: '10px 10px 8px'
-      },
-      children: [/*#__PURE__*/jsx(Saturation, {
-        hsva: hsva,
-        style: {
-          width: 'auto',
-          height: 150
-        },
-        onChange: handleSaturationChange
-      }), /*#__PURE__*/jsxs("div", {
-        style: {
-          display: 'flex',
-          marginTop: 4
-        },
-        children: [/*#__PURE__*/jsxs("div", {
-          style: {
-            flex: 1
-          },
-          children: [/*#__PURE__*/jsx(Hue, {
-            width: "auto",
-            height: 10,
-            hue: hsva.h,
-            pointer: Bar,
-            innerProps: {
-              style: {
-                marginLeft: 1,
-                marginRight: 5
-              }
-            },
-            onChange: newHue => handleChange(_extends({}, hsva, newHue))
-          }), !disableAlpha && /*#__PURE__*/jsx(Alpha, {
-            width: "auto",
-            height: 10,
-            hsva: hsva,
-            pointer: Bar,
-            style: {
-              marginTop: 4
-            },
-            innerProps: {
-              style: {
-                marginLeft: 1,
-                marginRight: 5
-              }
-            },
-            onChange: handleAlphaChange
-          })]
-        }), !disableAlpha && /*#__PURE__*/jsx(Alpha, {
-          width: 24,
-          height: 24,
-          hsva: hsva,
-          radius: 2,
-          style: {
-            marginLeft: 4
-          },
-          bgProps: {
-            style: {
-              background: 'transparent'
-            }
-          },
-          innerProps: {
-            style: styleAlpha
-          },
-          pointer: () => /*#__PURE__*/jsx(Fragment, {})
-        })]
-      })]
-    }), editableDisable && /*#__PURE__*/jsxs("div", {
-      style: {
-        display: 'flex',
-        margin: '0 10px 3px 10px'
-      },
-      children: [/*#__PURE__*/jsx(EditableInput, {
-        label: "Hex",
-        value: hsvaToHex(hsva).replace(/^#/, '').toLocaleUpperCase(),
-        onChange: (evn, val) => handleHex(val),
-        style: {
-          minWidth: 58
-        }
-      }), /*#__PURE__*/jsx(EditableInputRGBA, {
-        hsva: hsva,
-        style: {
-          marginLeft: 6
-        },
-        aProps: !disableAlpha ? {} : false,
-        onChange: result => handleChange(result.hsva)
-      })]
-    }), presetColors && presetColors.length > 0 && /*#__PURE__*/jsx(Swatch, {
-      style: styleSwatch,
-      colors: presetColors,
-      color: hsvaToHex(hsva),
-      onChange: hsvColor => handleChange(hsvColor),
-      rectProps: {
-        style: styleSwatchRect
-      }
-    })]
-  }));
-});
-Sketch.displayName = 'Sketch';
-
-function alphaToHex(alpha) {
-    var clampedAlpha = Math.max(0, Math.min(1, alpha));
-    var hexVal = Math.round(clampedAlpha * 255);
-    return hexVal.toString(16).toUpperCase().padStart(2, '0');
-}
-function ColorPickerField(_a) {
-    var element = _a.element, fieldLabel = _a.fieldLabel, responsiveStyles = _a.responsiveStyles, _b = _a.fieldVal, fieldVal = _b === void 0 ? 'FFFFFFFF' : _b, editMode = _a.editMode, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.elementProps, elementProps = _d === void 0 ? {} : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, children = _a.children;
-    var _f = __read(useState(false), 2), showPicker = _f[0], setShowPicker = _f[1];
-    return (jsxs$1("div", __assign({ css: __assign({ maxWidth: '100%', width: '100%', position: 'relative', pointerEvents: editMode || disabled ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, jsx$1("div", { css: __assign({ width: '100%', background: "#".concat(fieldVal), cursor: 'pointer' }, responsiveStyles.getTarget('field')), onClick: function () {
-                    if (!editMode && !disabled)
-                        setShowPicker(function (showPicker) { return !showPicker; });
-                } }), showPicker ? (jsxs$1("div", __assign({ css: {
-                    position: 'absolute',
-                    zIndex: FORM_Z_INDEX + 1
-                } }, { children: [jsx$1("div", { css: {
-                            position: 'fixed',
-                            top: '0px',
-                            right: '0px',
-                            bottom: '0px',
-                            left: '0px'
-                        }, onClick: function () { return setShowPicker(false); } }), jsx$1(Sketch, { "aria-label": element.properties.aria_label, color: "#".concat(fieldVal), onChange: function (color) {
-                            var hex = color.hex.substring(1, 7);
-                            var alpha = alphaToHex(color.rgba.a);
-                            onChange("".concat(hex).concat(alpha));
-                        } })] }))) : null] })));
-}
-
-export { ColorPickerField as default };