@chaoswise/ui 2.5.8 → 3.0.0

package/lib/Antd5/collapse/style/index.js

@@ -0,0 +1,183 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { unit } from '@ant-design/cssinjs';
+import { resetComponent, resetIcon } from '../../style';
+import { genCollapseMotion } from '../../style/motion';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+export var genBaseStyle = function genBaseStyle(token) {
+  var componentCls = token.componentCls,
+    contentBg = token.contentBg,
+    padding = token.padding,
+    headerBg = token.headerBg,
+    headerPadding = token.headerPadding,
+    collapseHeaderPaddingSM = token.collapseHeaderPaddingSM,
+    collapseHeaderPaddingLG = token.collapseHeaderPaddingLG,
+    collapsePanelBorderRadius = token.collapsePanelBorderRadius,
+    lineWidth = token.lineWidth,
+    lineType = token.lineType,
+    colorBorder = token.colorBorder,
+    colorText = token.colorText,
+    colorTextHeading = token.colorTextHeading,
+    colorTextDisabled = token.colorTextDisabled,
+    fontSizeLG = token.fontSizeLG,
+    lineHeight = token.lineHeight,
+    lineHeightLG = token.lineHeightLG,
+    marginSM = token.marginSM,
+    paddingSM = token.paddingSM,
+    paddingLG = token.paddingLG,
+    paddingXS = token.paddingXS,
+    motionDurationSlow = token.motionDurationSlow,
+    fontSizeIcon = token.fontSizeIcon,
+    contentPadding = token.contentPadding,
+    fontHeight = token.fontHeight,
+    fontHeightLG = token.fontHeightLG;
+  var borderBase = "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(colorBorder);
+  return _defineProperty({}, componentCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    backgroundColor: headerBg,
+    border: borderBase,
+    borderRadius: collapsePanelBorderRadius
+  }, "&-rtl", {
+    direction: 'rtl'
+  }), "& > ".concat(componentCls, "-item"), _defineProperty(_defineProperty(_defineProperty({
+    borderBottom: borderBase
+  }, "&:last-child", _defineProperty({}, "\n            &,\n            & > ".concat(componentCls, "-header"), {
+    borderRadius: "0 0 ".concat(unit(collapsePanelBorderRadius), " ").concat(unit(collapsePanelBorderRadius))
+  })), "> ".concat(componentCls, "-header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'relative',
+    // Compatible with old version of antd, should remove in next version
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignItems: 'flex-start',
+    padding: headerPadding,
+    color: colorTextHeading,
+    lineHeight: lineHeight,
+    cursor: 'pointer',
+    transition: "all ".concat(motionDurationSlow, ", visibility 0s")
+  }, "> ".concat(componentCls, "-header-text"), {
+    flex: 'auto'
+  }), '&:focus', {
+    outline: 'none'
+  }), "".concat(componentCls, "-expand-icon"), {
+    height: fontHeight,
+    display: 'flex',
+    alignItems: 'center',
+    paddingInlineEnd: marginSM
+  }), "".concat(componentCls, "-arrow"), _objectSpread(_objectSpread({}, resetIcon()), {}, {
+    fontSize: fontSizeIcon,
+    // when `transform: rotate()` is applied to icon's root element
+    transition: "transform ".concat(motionDurationSlow),
+    // when `transform: rotate()` is applied to icon's child element
+    svg: {
+      transition: "transform ".concat(motionDurationSlow)
+    }
+  })), "".concat(componentCls, "-header-text"), {
+    marginInlineEnd: 'auto'
+  })), "".concat(componentCls, "-icon-collapsible-only"), _defineProperty({
+    cursor: 'unset'
+  }, "".concat(componentCls, "-expand-icon"), {
+    cursor: 'pointer'
+  }))), "".concat(componentCls, "-content"), _defineProperty(_defineProperty({
+    color: colorText,
+    backgroundColor: contentBg,
+    borderTop: borderBase
+  }, "& > ".concat(componentCls, "-content-box"), {
+    padding: contentPadding
+  }), "&-hidden", {
+    display: 'none'
+  })), "&-small", _defineProperty({}, "> ".concat(componentCls, "-item"), _defineProperty(_defineProperty({}, "> ".concat(componentCls, "-header"), _defineProperty({
+    padding: collapseHeaderPaddingSM,
+    paddingInlineStart: paddingXS
+  }, "> ".concat(componentCls, "-expand-icon"), {
+    // Arrow offset
+    marginInlineStart: token.calc(paddingSM).sub(paddingXS).equal()
+  })), "> ".concat(componentCls, "-content > ").concat(componentCls, "-content-box"), {
+    padding: paddingSM
+  }))), "&-large", _defineProperty({}, "> ".concat(componentCls, "-item"), _defineProperty(_defineProperty({
+    fontSize: fontSizeLG,
+    lineHeight: lineHeightLG
+  }, "> ".concat(componentCls, "-header"), _defineProperty({
+    padding: collapseHeaderPaddingLG,
+    paddingInlineStart: padding
+  }, "> ".concat(componentCls, "-expand-icon"), {
+    height: fontHeightLG,
+    // Arrow offset
+    marginInlineStart: token.calc(paddingLG).sub(padding).equal()
+  })), "> ".concat(componentCls, "-content > ").concat(componentCls, "-content-box"), {
+    padding: paddingLG
+  }))), "".concat(componentCls, "-item:last-child"), _defineProperty({
+    borderBottom: 0
+  }, "> ".concat(componentCls, "-content"), {
+    borderRadius: "0 0 ".concat(unit(collapsePanelBorderRadius), " ").concat(unit(collapsePanelBorderRadius))
+  })), "& ".concat(componentCls, "-item-disabled > ").concat(componentCls, "-header"), _defineProperty({}, "\n          &,\n          & > .arrow\n        ", {
+    color: colorTextDisabled,
+    cursor: 'not-allowed'
+  })), "&".concat(componentCls, "-icon-position-end"), _defineProperty({}, "& > ".concat(componentCls, "-item"), _defineProperty({}, "> ".concat(componentCls, "-header"), _defineProperty({}, "".concat(componentCls, "-expand-icon"), {
+    order: 1,
+    paddingInlineEnd: 0,
+    paddingInlineStart: marginSM
+  }))))));
+};
+var genArrowStyle = function genArrowStyle(token) {
+  var componentCls = token.componentCls;
+  var fixedSelector = "> ".concat(componentCls, "-item > ").concat(componentCls, "-header ").concat(componentCls, "-arrow");
+  return _defineProperty({}, "".concat(componentCls, "-rtl"), _defineProperty({}, fixedSelector, {
+    transform: "rotate(180deg)"
+  }));
+};
+var genBorderlessStyle = function genBorderlessStyle(token) {
+  var componentCls = token.componentCls,
+    headerBg = token.headerBg,
+    paddingXXS = token.paddingXXS,
+    colorBorder = token.colorBorder;
+  return _defineProperty({}, "".concat(componentCls, "-borderless"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    backgroundColor: headerBg,
+    border: 0
+  }, "> ".concat(componentCls, "-item"), {
+    borderBottom: "1px solid ".concat(colorBorder)
+  }), "\n        > ".concat(componentCls, "-item:last-child,\n        > ").concat(componentCls, "-item:last-child ").concat(componentCls, "-header\n      "), {
+    borderRadius: 0
+  }), "> ".concat(componentCls, "-item:last-child"), {
+    borderBottom: 0
+  }), "> ".concat(componentCls, "-item > ").concat(componentCls, "-content"), {
+    backgroundColor: 'transparent',
+    borderTop: 0
+  }), "> ".concat(componentCls, "-item > ").concat(componentCls, "-content > ").concat(componentCls, "-content-box"), {
+    paddingTop: paddingXXS
+  }));
+};
+var genGhostStyle = function genGhostStyle(token) {
+  var componentCls = token.componentCls,
+    paddingSM = token.paddingSM;
+  return _defineProperty({}, "".concat(componentCls, "-ghost"), _defineProperty({
+    backgroundColor: 'transparent',
+    border: 0
+  }, "> ".concat(componentCls, "-item"), _defineProperty({
+    borderBottom: 0
+  }, "> ".concat(componentCls, "-content"), _defineProperty({
+    backgroundColor: 'transparent',
+    border: 0
+  }, "> ".concat(componentCls, "-content-box"), {
+    paddingBlock: paddingSM
+  }))));
+};
+export var prepareComponentToken = function prepareComponentToken(token) {
+  return {
+    headerPadding: "".concat(token.paddingSM, "px ").concat(token.padding, "px"),
+    headerBg: token.colorFillAlter,
+    contentPadding: "".concat(token.padding, "px 16px"),
+    // Fixed Value
+    contentBg: token.colorBgContainer
+  };
+};
+export default genStyleHooks('Collapse', function (token) {
+  var collapseToken = mergeToken(token, {
+    collapseHeaderPaddingSM: "".concat(unit(token.paddingXS), " ").concat(unit(token.paddingSM)),
+    collapseHeaderPaddingLG: "".concat(unit(token.padding), " ").concat(unit(token.paddingLG)),
+    collapsePanelBorderRadius: token.borderRadiusLG
+  });
+  return [genBaseStyle(collapseToken), genBorderlessStyle(collapseToken), genGhostStyle(collapseToken), genArrowStyle(collapseToken), genCollapseMotion(collapseToken)];
+}, prepareComponentToken);

package/lib/Antd5/color-picker/ColorPicker.js

@@ -0,0 +1,233 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["value", "defaultValue", "format", "defaultFormat", "allowClear", "presets", "children", "trigger", "open", "disabled", "placement", "arrow", "panelRender", "showText", "style", "className", "size", "rootClassName", "prefixCls", "styles", "disabledAlpha", "onFormatChange", "onChange", "onClear", "onOpenChange", "onChangeComplete", "getPopupContainer", "autoAdjustOverflow", "destroyTooltipOnHide"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useContext, useMemo, useRef } from 'react';
+import classNames from 'classnames';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import genPurePanel from '../_util/PurePanel';
+import { getStatusClassNames } from '../_util/statusUtils';
+import { devUseWarning } from '../_util/warning';
+import { ConfigContext } from '../config-provider/context';
+import DisabledContext from '../config-provider/DisabledContext';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+import useSize from '../config-provider/hooks/useSize';
+import { FormItemInputContext, NoFormStyle } from '../form/context';
+import Popover from '../popover';
+import ColorPickerPanel from './ColorPickerPanel';
+import ColorTrigger from './components/ColorTrigger';
+import useColorState from './hooks/useColorState';
+import useStyle from './style';
+import { genAlphaColor, generateColor, getAlphaColor } from './util';
+var ColorPicker = function ColorPicker(props) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    format = props.format,
+    defaultFormat = props.defaultFormat,
+    _props$allowClear = props.allowClear,
+    allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
+    presets = props.presets,
+    children = props.children,
+    _props$trigger = props.trigger,
+    trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
+    open = props.open,
+    disabled = props.disabled,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement,
+    _props$arrow = props.arrow,
+    arrow = _props$arrow === void 0 ? true : _props$arrow,
+    panelRender = props.panelRender,
+    showText = props.showText,
+    style = props.style,
+    className = props.className,
+    customizeSize = props.size,
+    rootClassName = props.rootClassName,
+    customizePrefixCls = props.prefixCls,
+    styles = props.styles,
+    _props$disabledAlpha = props.disabledAlpha,
+    disabledAlpha = _props$disabledAlpha === void 0 ? false : _props$disabledAlpha,
+    onFormatChange = props.onFormatChange,
+    onChange = props.onChange,
+    onClear = props.onClear,
+    onOpenChange = props.onOpenChange,
+    onChangeComplete = props.onChangeComplete,
+    getPopupContainer = props.getPopupContainer,
+    _props$autoAdjustOver = props.autoAdjustOverflow,
+    autoAdjustOverflow = _props$autoAdjustOver === void 0 ? true : _props$autoAdjustOver,
+    destroyTooltipOnHide = props.destroyTooltipOnHide,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    direction = _useContext.direction,
+    colorPicker = _useContext.colorPicker;
+  var contextDisabled = useContext(DisabledContext);
+  var mergedDisabled = disabled !== null && disabled !== void 0 ? disabled : contextDisabled;
+  var _useColorState = useColorState('', {
+      value: value,
+      defaultValue: defaultValue
+    }),
+    _useColorState2 = _slicedToArray(_useColorState, 3),
+    colorValue = _useColorState2[0],
+    setColorValue = _useColorState2[1],
+    prevValue = _useColorState2[2];
+  var _useMergedState = useMergedState(false, {
+      value: open,
+      postState: function postState(openData) {
+        return !mergedDisabled && openData;
+      },
+      onChange: onOpenChange
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    popupOpen = _useMergedState2[0],
+    setPopupOpen = _useMergedState2[1];
+  var _useMergedState3 = useMergedState(format, {
+      value: format,
+      defaultValue: defaultFormat,
+      onChange: onFormatChange
+    }),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    formatValue = _useMergedState4[0],
+    setFormatValue = _useMergedState4[1];
+  var prefixCls = getPrefixCls('color-picker', customizePrefixCls);
+  var isAlphaColor = useMemo(function () {
+    return getAlphaColor(colorValue) < 100;
+  }, [colorValue]);
+  // ===================== Form Status =====================
+  var _React$useContext = React.useContext(FormItemInputContext),
+    contextStatus = _React$useContext.status;
+  // ===================== Style =====================
+  var mergedSize = useSize(customizeSize);
+  var rootCls = useCSSVarCls(prefixCls);
+  var _useStyle = useStyle(prefixCls, rootCls),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  var rtlCls = _defineProperty({}, "".concat(prefixCls, "-rtl"), direction);
+  var mergedRootCls = classNames(rootClassName, cssVarCls, rootCls, rtlCls);
+  var mergedCls = classNames(getStatusClassNames(prefixCls, contextStatus), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-sm"), mergedSize === 'small'), "".concat(prefixCls, "-lg"), mergedSize === 'large'), colorPicker === null || colorPicker === void 0 ? void 0 : colorPicker.className, mergedRootCls, className, hashId);
+  var mergedPopupCls = classNames(prefixCls, mergedRootCls);
+  var popupAllowCloseRef = useRef(true);
+  // ===================== Warning ======================
+  if (process.env.NODE_ENV !== 'production') {
+    var warning = devUseWarning('ColorPicker');
+    warning(!(disabledAlpha && isAlphaColor), 'usage', '`disabledAlpha` will make the alpha to be 100% when use alpha color.');
+  }
+  var handleChange = function handleChange(data, type, pickColor) {
+    var _prevValue$current;
+    var color = generateColor(data);
+    // If color is cleared, reset alpha to 100
+    var isNull = value === null || !value && defaultValue === null;
+    if ((_prevValue$current = prevValue.current) !== null && _prevValue$current !== void 0 && _prevValue$current.cleared || isNull) {
+      // ignore alpha slider
+      if (getAlphaColor(colorValue) === 0 && type !== 'alpha') {
+        color = genAlphaColor(color);
+      }
+    }
+    // ignore alpha color
+    if (disabledAlpha && isAlphaColor) {
+      color = genAlphaColor(color);
+    }
+    // Only for drag-and-drop color picking
+    if (pickColor) {
+      popupAllowCloseRef.current = false;
+    } else {
+      onChangeComplete === null || onChangeComplete === void 0 || onChangeComplete(color);
+    }
+    setColorValue(color);
+    onChange === null || onChange === void 0 || onChange(color, color.toHexString());
+  };
+  var handleClear = function handleClear() {
+    onClear === null || onClear === void 0 || onClear();
+  };
+  var handleChangeComplete = function handleChangeComplete(color) {
+    popupAllowCloseRef.current = true;
+    var changeColor = generateColor(color);
+    // ignore alpha color
+    if (disabledAlpha && isAlphaColor) {
+      changeColor = genAlphaColor(color);
+    }
+    onChangeComplete === null || onChangeComplete === void 0 || onChangeComplete(changeColor);
+  };
+  var popoverProps = {
+    open: popupOpen,
+    trigger: trigger,
+    placement: placement,
+    arrow: arrow,
+    rootClassName: rootClassName,
+    getPopupContainer: getPopupContainer,
+    autoAdjustOverflow: autoAdjustOverflow,
+    destroyTooltipOnHide: destroyTooltipOnHide
+  };
+  var colorBaseProps = {
+    prefixCls: prefixCls,
+    color: colorValue,
+    allowClear: allowClear,
+    disabled: mergedDisabled,
+    disabledAlpha: disabledAlpha,
+    presets: presets,
+    panelRender: panelRender,
+    format: formatValue,
+    onFormatChange: setFormatValue,
+    onChangeComplete: handleChangeComplete
+  };
+  var mergedStyle = _objectSpread(_objectSpread({}, colorPicker === null || colorPicker === void 0 ? void 0 : colorPicker.style), style);
+  // ============================ zIndex ============================
+  return wrapCSSVar(_jsx(Popover, _objectSpread(_objectSpread({
+    style: styles === null || styles === void 0 ? void 0 : styles.popup,
+    overlayInnerStyle: styles === null || styles === void 0 ? void 0 : styles.popupOverlayInner,
+    onOpenChange: function onOpenChange(visible) {
+      if (popupAllowCloseRef.current && !mergedDisabled) {
+        setPopupOpen(visible);
+      }
+    },
+    content: _jsx(NoFormStyle, {
+      override: true,
+      status: true,
+      children: _jsx(ColorPickerPanel, _objectSpread(_objectSpread({}, colorBaseProps), {}, {
+        onChange: handleChange,
+        onChangeComplete: handleChangeComplete,
+        onClear: handleClear
+      }))
+    }),
+    overlayClassName: mergedPopupCls
+  }, popoverProps), {}, {
+    children: children || _jsx(ColorTrigger, _objectSpread(_objectSpread({
+      open: popupOpen,
+      className: mergedCls,
+      style: mergedStyle,
+      prefixCls: prefixCls,
+      disabled: mergedDisabled,
+      showText: showText,
+      format: formatValue
+    }, rest), {}, {
+      color: colorValue
+    }))
+  })));
+};
+if (process.env.NODE_ENV !== 'production') {
+  ColorPicker.displayName = 'ColorPicker';
+}
+var PurePanel = genPurePanel(ColorPicker, 'color-picker', /* istanbul ignore next */
+function (prefixCls) {
+  return prefixCls;
+}, function (props) {
+  return _objectSpread(_objectSpread({}, props), {}, {
+    placement: 'bottom',
+    autoAdjustOverflow: false
+  });
+});
+ColorPicker._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
+export default ColorPicker;

package/lib/Antd5/color-picker/ColorPickerPanel.js

@@ -0,0 +1,64 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["prefixCls", "presets", "panelRender", "color", "onChange", "onClear"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Divider from '../divider';
+import PanelPicker from './components/PanelPicker';
+import PanelPresets from './components/PanelPresets';
+import { PanelPickerProvider, PanelPresetsProvider } from './context';
+var ColorPickerPanel = function ColorPickerPanel(props) {
+  var prefixCls = props.prefixCls,
+    presets = props.presets,
+    panelRender = props.panelRender,
+    color = props.color,
+    onChange = props.onChange,
+    onClear = props.onClear,
+    injectProps = _objectWithoutProperties(props, _excluded);
+  var colorPickerPanelPrefixCls = "".concat(prefixCls, "-inner");
+  // ==== Inject props ===
+  var panelPickerProps = _objectSpread({
+    prefixCls: prefixCls,
+    value: color,
+    onChange: onChange,
+    onClear: onClear
+  }, injectProps);
+  var panelPresetsProps = React.useMemo(function () {
+    return {
+      prefixCls: prefixCls,
+      value: color,
+      presets: presets,
+      onChange: onChange
+    };
+  }, [prefixCls, color, presets, onChange]);
+  // ====================== Render ======================
+  var innerPanel = _jsxs("div", {
+    className: "".concat(colorPickerPanelPrefixCls, "-content"),
+    children: [_jsx(PanelPicker, {}), Array.isArray(presets) && _jsx(Divider, {}), _jsx(PanelPresets, {})]
+  });
+  return _jsx(PanelPickerProvider, {
+    value: panelPickerProps,
+    children: _jsx(PanelPresetsProvider, {
+      value: panelPresetsProps,
+      children: _jsx("div", {
+        className: colorPickerPanelPrefixCls,
+        children: typeof panelRender === 'function' ? panelRender(innerPanel, {
+          components: {
+            Picker: PanelPicker,
+            Presets: PanelPresets
+          }
+        }) : innerPanel
+      })
+    })
+  });
+};
+if (process.env.NODE_ENV !== 'production') {
+  ColorPickerPanel.displayName = 'ColorPickerPanel';
+}
+export default ColorPickerPanel;

package/lib/Antd5/color-picker/color.js

@@ -0,0 +1,67 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Color as RcColor } from '@rc-component/color-picker';
+export var toHexFormat = function toHexFormat(value, alpha) {
+  return (value === null || value === void 0 ? void 0 : value.replace(/[^\w/]/gi, '').slice(0, alpha ? 8 : 6)) || '';
+};
+export var getHex = function getHex(value, alpha) {
+  return value ? toHexFormat(value, alpha) : '';
+};
+export var ColorFactory = /*#__PURE__*/function () {
+  function ColorFactory(color) {
+    _classCallCheck(this, ColorFactory);
+    /** Original Color object */
+    Object.defineProperty(this, "metaColor", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(this, "cleared", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: false
+    });
+    this.metaColor = new RcColor(color);
+    if (!color) {
+      this.metaColor.setAlpha(0);
+      this.cleared = true;
+    }
+  }
+  return _createClass(ColorFactory, [{
+    key: "toHsb",
+    value: function toHsb() {
+      return this.metaColor.toHsb();
+    }
+  }, {
+    key: "toHsbString",
+    value: function toHsbString() {
+      return this.metaColor.toHsbString();
+    }
+  }, {
+    key: "toHex",
+    value: function toHex() {
+      return getHex(this.toHexString(), this.metaColor.getAlpha() < 1);
+    }
+  }, {
+    key: "toHexString",
+    value: function toHexString() {
+      return this.metaColor.getAlpha() === 1 ? this.metaColor.toHexString() : this.metaColor.toHex8String();
+    }
+  }, {
+    key: "toRgb",
+    value: function toRgb() {
+      return this.metaColor.toRgb();
+    }
+  }, {
+    key: "toRgbString",
+    value: function toRgbString() {
+      return this.metaColor.toRgbString();
+    }
+  }]);
+}();

package/lib/Antd5/color-picker/components/ColorAlphaInput.js

@@ -0,0 +1,45 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { generateColor, getAlphaColor } from '../util';
+import ColorSteppers from './ColorSteppers';
+var ColorAlphaInput = function ColorAlphaInput(_ref) {
+  var prefixCls = _ref.prefixCls,
+    value = _ref.value,
+    onChange = _ref.onChange;
+  var colorAlphaInputPrefixCls = "".concat(prefixCls, "-alpha-input");
+  var _useState = useState(generateColor(value || '#000')),
+    _useState2 = _slicedToArray(_useState, 2),
+    alphaValue = _useState2[0],
+    setAlphaValue = _useState2[1];
+  // Update step value
+  useEffect(function () {
+    if (value) {
+      setAlphaValue(value);
+    }
+  }, [value]);
+  var handleAlphaChange = function handleAlphaChange(step) {
+    var hsba = alphaValue.toHsb();
+    hsba.a = (step || 0) / 100;
+    var genColor = generateColor(hsba);
+    if (!value) {
+      setAlphaValue(genColor);
+    }
+    onChange === null || onChange === void 0 || onChange(genColor);
+  };
+  return _jsx(ColorSteppers, {
+    value: getAlphaColor(alphaValue),
+    prefixCls: prefixCls,
+    formatter: function formatter(step) {
+      return "".concat(step, "%");
+    },
+    className: colorAlphaInputPrefixCls,
+    onChange: handleAlphaChange
+  });
+};
+export default ColorAlphaInput;

package/lib/Antd5/color-picker/components/ColorClear.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { generateColor } from '../util';
+var ColorClear = function ColorClear(_ref) {
+  var prefixCls = _ref.prefixCls,
+    value = _ref.value,
+    onChange = _ref.onChange;
+  var handleClick = function handleClick() {
+    if (value && !value.cleared) {
+      var hsba = value.toHsb();
+      hsba.a = 0;
+      var genColor = generateColor(hsba);
+      genColor.cleared = true;
+      onChange === null || onChange === void 0 || onChange(genColor);
+    }
+  };
+  return _jsx("div", {
+    className: "".concat(prefixCls, "-clear"),
+    onClick: handleClick
+  });
+};
+export default ColorClear;