@stella-source/stellasource-dsl 3.2.0 → 3.3.1

package/dist/esm/index.esm.js

@@ -4507,6 +4507,7 @@ var Entity = /*#__PURE__*/function () {
     _defineProperty(this, "instanceId", void 0);
     /** @private Internal cache map. Do not access this directly */
     _defineProperty(this, "cache", new Map());
+    _defineProperty(this, "extracted", new Set());
     this.instanceId = instanceId;
   }
   _createClass(Entity, [{
@@ -4836,13 +4837,12 @@ function unit$1(num) {
   return num;
 }
 function toStyleStr(style, tokenKey, styleId) {
-  var _objectSpread2$1;
   var customizeAttrs = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   var plain = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   if (plain) {
     return style;
   }
-  var attrs = _objectSpread2(_objectSpread2({}, customizeAttrs), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, ATTR_TOKEN, tokenKey), _defineProperty(_objectSpread2$1, ATTR_MARK, styleId), _objectSpread2$1));
+  var attrs = _objectSpread2(_objectSpread2({}, customizeAttrs), {}, _defineProperty(_defineProperty({}, ATTR_TOKEN, tokenKey), ATTR_MARK, styleId));
   var attrStr = Object.keys(attrs).map(function (attr) {
     var val = attrs[attr];
     return val ? "".concat(attr, "=\"").concat(val, "\"") : null;
@@ -5047,7 +5047,6 @@ onCacheEffect) {
   }, /* eslint-disable react-hooks/exhaustive-deps */
   [fullPathStr]
   /* eslint-enable */);
-
   var cacheEntity = globalCache.opGet(fullPathStr);
 
   // HMR clean the cache but not trigger `useMemo` again
@@ -5127,14 +5126,13 @@ var TOKEN_THRESHOLD = 0;
 // Remove will check current keys first
 function cleanTokenStyle(tokenKey, instanceId) {
   tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) - 1);
-  var tokenKeyList = Array.from(tokenKeys.keys());
-  var cleanableKeyList = tokenKeyList.filter(function (key) {
-    var count = tokenKeys.get(key) || 0;
-    return count <= 0;
+  var cleanableKeyList = new Set();
+  tokenKeys.forEach(function (value, key) {
+    if (value <= 0) cleanableKeyList.add(key);
   });
 
   // Should keep tokens under threshold for not to insert style too often
-  if (tokenKeyList.length - cleanableKeyList.length > TOKEN_THRESHOLD) {
+  if (tokenKeys.size - cleanableKeyList.size > TOKEN_THRESHOLD) {
     cleanableKeyList.forEach(function (key) {
       removeStyleTags(key, instanceId);
       tokenKeys.delete(key);
@@ -5343,16 +5341,6 @@ function replace (value, pattern, replacement) {
 	return value.replace(pattern, replacement)
 }
 
-/**
- * @param {string} value
- * @param {string} search
- * @param {number} position
- * @return {number}
- */
-function indexof (value, search, position) {
-	return value.indexOf(search, position)
-}
-
 /**
  * @param {string} value
  * @param {number} index
@@ -5639,6 +5627,7 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 	var variable = 1;
 	var scanning = 1;
 	var ampersand = 1;
+	var parens = 0;
 	var character = 0;
 	var type = '';
 	var props = rules;
@@ -5650,17 +5639,23 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 		switch (previous = character, character = next()) {
 			// (
 			case 40:
-				if (previous != 108 && charat(characters, length - 1) == 58) {
-					if (indexof(characters += replace(delimit(character), '&', '&\f'), '&\f', abs(index ? points[index - 1] : 0)) != -1)
-						ampersand = -1;
-					break
-				}
+				if (previous != 108 && charat(characters, length - 1) == 58) parens++, characters += '(';
+				else characters += delimit(character);
+				break
+			// )
+			case 41:
+				parens--, characters += ')';
+				break
 			// " ' [
 			case 34: case 39: case 91:
 				characters += delimit(character);
 				break
 			// \t \n \r \s
 			case 9: case 10: case 13: case 32:
+				if (parens > 0) {
+					characters += from(character);
+					break
+				}
 				characters += whitespace$1(previous);
 				break
 			// \
@@ -5683,12 +5678,16 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 				points[index++] = strlen(characters) * ampersand;
 			// } ; \0
 			case 125 * variable: case 59: case 0:
+				if (parens > 0 && character) {
+					characters += from(character);
+					break
+				}
 				switch (character) {
 					// \0 }
 					case 0: case 125: scanning = 0;
 					// ;
 					case 59 + offset: if (ampersand == -1) characters = replace(characters, /\f/g, '');
-						if (property > 0 && (strlen(characters) - length || (variable === 0 && previous === 47)))
+						if (property > 0 && (strlen(characters) - length || variable === 0))
 							append(property > 32 ? declaration(characters + ';', rule, parent, length - 1, declarations) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2, declarations), declarations);
 						break
 					// @ ;
@@ -5737,6 +5736,7 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 						break
 					// ,
 					case 44:
+						if (parens > 0) break
 						points[index++] = (strlen(characters) - 1) * ampersand, ampersand = 1;
 						break
 					// @
@@ -6209,7 +6209,8 @@ function useStyleRegister(info, styleFn) {
         styleId = _ref3[2];
       if ((fromHMR || autoClear) && isClientSide) {
         removeCSS(styleId, {
-          mark: ATTR_MARK
+          mark: ATTR_MARK,
+          attachTo: container
         });
       }
     },
@@ -6283,8 +6284,7 @@ function useStyleRegister(info, styleFn) {
     if (!ssrInline || isMergedClientSide || !defaultCache) {
       styleNode = /*#__PURE__*/a$m.createElement(Empty, null);
     } else {
-      var _ref6;
-      styleNode = /*#__PURE__*/a$m.createElement("style", _extends({}, (_ref6 = {}, _defineProperty(_ref6, ATTR_TOKEN, cachedTokenKey), _defineProperty(_ref6, ATTR_MARK, cachedStyleId), _ref6), {
+      styleNode = /*#__PURE__*/a$m.createElement("style", _extends({}, _defineProperty(_defineProperty({}, ATTR_TOKEN, cachedTokenKey), ATTR_MARK, cachedStyleId), {
         dangerouslySetInnerHTML: {
           __html: cachedStyleStr
         }
@@ -6371,7 +6371,8 @@ var useCSSVarRegister = function useCSSVarRegister(config, fn) {
       styleId = _ref2[2];
     if (isClientSide) {
       removeCSS(styleId, {
-        mark: ATTR_MARK
+        mark: ATTR_MARK,
+        attachTo: container
       });
     }
   }, function (_ref3) {
@@ -6416,8 +6417,7 @@ var extract = function extract(cache, effectStyles, options) {
   return [order, styleId, styleText];
 };
 
-var _ExtractStyleFns;
-(_ExtractStyleFns = {}, _defineProperty(_ExtractStyleFns, STYLE_PREFIX, extract$1), _defineProperty(_ExtractStyleFns, TOKEN_PREFIX, extract$2), _defineProperty(_ExtractStyleFns, CSS_VAR_PREFIX, extract), _ExtractStyleFns);
+_defineProperty(_defineProperty(_defineProperty({}, STYLE_PREFIX, extract$1), TOKEN_PREFIX, extract$2), CSS_VAR_PREFIX, extract);
 
 var Keyframe = /*#__PURE__*/function () {
   function Keyframe(name, style) {
@@ -8005,7 +8005,7 @@ function useMergedState(defaultStateValue, option) {
       } else if (hasValue(defaultValue)) {
         return typeof defaultValue === 'function' ? defaultValue() : defaultValue;
       } else {
-        return defaultStateValue;
+        return typeof defaultStateValue === 'function' ? defaultStateValue() : defaultStateValue;
       }
     }),
     _useState2 = _slicedToArray(_useState, 2),
@@ -8515,7 +8515,7 @@ function genStyleUtils(config) {
 
 const PresetColors = ['blue', 'purple', 'cyan', 'green', 'magenta', 'pink', 'red', 'orange', 'yellow', 'volcano', 'geekblue', 'lime', 'gold'];
 
-var version = '5.26.3';
+var version = '5.29.3';
 
 function isStableColor(color) {
   return color >= 0 && color <= 255;
@@ -8756,17 +8756,6 @@ const unitless = {
   opacityImage: true
 };
 const ignore = {
-  size: true,
-  sizeSM: true,
-  sizeLG: true,
-  sizeMD: true,
-  sizeXS: true,
-  sizeXXS: true,
-  sizeMS: true,
-  sizeXL: true,
-  sizeXXL: true,
-  sizeUnit: true,
-  sizeStep: true,
   motionBase: true,
   motionUnit: true
 };
@@ -9700,8 +9689,8 @@ function diffKeys() {
   return list;
 }
 
-var _excluded$5 = ["component", "children", "onVisibleChanged", "onAllRemoved"],
-  _excluded2 = ["status"];
+var _excluded$6 = ["component", "children", "onVisibleChanged", "onAllRemoved"],
+  _excluded2$1 = ["status"];
 var MOTION_PROP_NAMES = ['eventProps', 'visible', 'children', 'motionName', 'motionAppear', 'motionEnter', 'motionLeave', 'motionLeaveImmediately', 'motionDeadline', 'removeOnLeave', 'leavedClassName', 'onAppearPrepare', 'onAppearStart', 'onAppearActive', 'onAppearEnd', 'onEnterStart', 'onEnterActive', 'onEnterEnd', 'onLeaveStart', 'onLeaveActive', 'onLeaveEnd'];
 /**
  * Generate a CSSMotionList component with config
@@ -9758,7 +9747,7 @@ function genCSSMotionList(transitionSupport) {
           children = _this$props.children,
           _onVisibleChanged = _this$props.onVisibleChanged;
           _this$props.onAllRemoved;
-          var restProps = _objectWithoutProperties(_this$props, _excluded$5);
+          var restProps = _objectWithoutProperties(_this$props, _excluded$6);
         var Component = component || a$m.Fragment;
         var motionProps = {};
         MOTION_PROP_NAMES.forEach(function (prop) {
@@ -9768,7 +9757,7 @@ function genCSSMotionList(transitionSupport) {
         delete restProps.keys;
         return /*#__PURE__*/a$m.createElement(Component, restProps, keyEntities.map(function (_ref2, index) {
           var status = _ref2.status,
-            eventProps = _objectWithoutProperties(_ref2, _excluded2);
+            eventProps = _objectWithoutProperties(_ref2, _excluded2$1);
           var visible = status === STATUS_ADD || status === STATUS_KEEP;
           return /*#__PURE__*/a$m.createElement(CSSMotion$1, _extends({}, motionProps, {
             key: eventProps.key,
@@ -9931,19 +9920,17 @@ function _regeneratorDefine(e, r, n, t) {
     i = 0;
   }
   _regeneratorDefine = function regeneratorDefine(e, r, n, t) {
-    if (r) i ? i(e, r, {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
       value: n,
       enumerable: !t,
       configurable: !t,
       writable: !t
-    }) : e[r] = n;else {
-      var o = function o(r, n) {
-        _regeneratorDefine(e, r, function (e) {
-          return this._invoke(r, n, e);
-        });
-      };
-      o("next", 0), o("throw", 1), o("return", 2);
-    }
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
   }, _regeneratorDefine(e, r, n, t);
 }
 
@@ -10253,6 +10240,734 @@ const NoCompactStyle = props => {
   }, children);
 };
 
+var _excluded$5 = ["b"],
+  _excluded2 = ["v"];
+var getRoundNumber = function getRoundNumber(value) {
+  return Math.round(Number(value || 0));
+};
+var convertHsb2Hsv = function convertHsb2Hsv(color) {
+  if (color instanceof FastColor) {
+    return color;
+  }
+  if (color && _typeof(color) === 'object' && 'h' in color && 'b' in color) {
+    var _ref = color,
+      b = _ref.b,
+      resets = _objectWithoutProperties(_ref, _excluded$5);
+    return _objectSpread2(_objectSpread2({}, resets), {}, {
+      v: b
+    });
+  }
+  if (typeof color === 'string' && /hsb/.test(color)) {
+    return color.replace(/hsb/, 'hsv');
+  }
+  return color;
+};
+var Color = /*#__PURE__*/function (_FastColor) {
+  _inherits(Color, _FastColor);
+  var _super = _createSuper(Color);
+  function Color(color) {
+    _classCallCheck(this, Color);
+    return _super.call(this, convertHsb2Hsv(color));
+  }
+  _createClass(Color, [{
+    key: "toHsbString",
+    value: function toHsbString() {
+      var hsb = this.toHsb();
+      var saturation = getRoundNumber(hsb.s * 100);
+      var lightness = getRoundNumber(hsb.b * 100);
+      var hue = getRoundNumber(hsb.h);
+      var alpha = hsb.a;
+      var hsbString = "hsb(".concat(hue, ", ").concat(saturation, "%, ").concat(lightness, "%)");
+      var hsbaString = "hsba(".concat(hue, ", ").concat(saturation, "%, ").concat(lightness, "%, ").concat(alpha.toFixed(alpha === 0 ? 0 : 2), ")");
+      return alpha === 1 ? hsbString : hsbaString;
+    }
+  }, {
+    key: "toHsb",
+    value: function toHsb() {
+      var _this$toHsv = this.toHsv(),
+        v = _this$toHsv.v,
+        resets = _objectWithoutProperties(_this$toHsv, _excluded2);
+      return _objectSpread2(_objectSpread2({}, resets), {}, {
+        b: v,
+        a: this.a
+      });
+    }
+  }]);
+  return Color;
+}(FastColor);
+
+var ColorPickerPrefixCls = 'rc-color-picker';
+var generateColor$1 = function generateColor(color) {
+  if (color instanceof Color) {
+    return color;
+  }
+  return new Color(color);
+};
+var defaultColor = generateColor$1('#1677ff');
+var calculateColor = function calculateColor(props) {
+  var offset = props.offset,
+    targetRef = props.targetRef,
+    containerRef = props.containerRef,
+    color = props.color,
+    type = props.type;
+  var _containerRef$current = containerRef.current.getBoundingClientRect(),
+    width = _containerRef$current.width,
+    height = _containerRef$current.height;
+  var _targetRef$current$ge = targetRef.current.getBoundingClientRect(),
+    targetWidth = _targetRef$current$ge.width,
+    targetHeight = _targetRef$current$ge.height;
+  var centerOffsetX = targetWidth / 2;
+  var centerOffsetY = targetHeight / 2;
+  var saturation = (offset.x + centerOffsetX) / width;
+  var bright = 1 - (offset.y + centerOffsetY) / height;
+  var hsb = color.toHsb();
+  var alphaOffset = saturation;
+  var hueOffset = (offset.x + centerOffsetX) / width * 360;
+  if (type) {
+    switch (type) {
+      case 'hue':
+        return generateColor$1(_objectSpread2(_objectSpread2({}, hsb), {}, {
+          h: hueOffset <= 0 ? 0 : hueOffset
+        }));
+      case 'alpha':
+        return generateColor$1(_objectSpread2(_objectSpread2({}, hsb), {}, {
+          a: alphaOffset <= 0 ? 0 : alphaOffset
+        }));
+    }
+  }
+  return generateColor$1({
+    h: hsb.h,
+    s: saturation <= 0 ? 0 : saturation,
+    b: bright >= 1 ? 1 : bright,
+    a: hsb.a
+  });
+};
+var calcOffset = function calcOffset(color, type) {
+  var hsb = color.toHsb();
+  switch (type) {
+    case 'hue':
+      return {
+        x: hsb.h / 360 * 100,
+        y: 50
+      };
+    case 'alpha':
+      return {
+        x: color.a * 100,
+        y: 50
+      };
+
+    // Picker panel
+    default:
+      return {
+        x: hsb.s * 100,
+        y: (1 - hsb.b) * 100
+      };
+  }
+};
+
+var ColorBlock = function ColorBlock(_ref) {
+  var color = _ref.color,
+    prefixCls = _ref.prefixCls,
+    className = _ref.className,
+    style = _ref.style,
+    onClick = _ref.onClick;
+  var colorBlockCls = "".concat(prefixCls, "-color-block");
+  return /*#__PURE__*/a__default.createElement("div", {
+    className: classNames(colorBlockCls, className),
+    style: style,
+    onClick: onClick
+  }, /*#__PURE__*/a__default.createElement("div", {
+    className: "".concat(colorBlockCls, "-inner"),
+    style: {
+      background: color
+    }
+  }));
+};
+
+function getPosition(e) {
+  var obj = 'touches' in e ? e.touches[0] : e;
+  var scrollXOffset = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
+  var scrollYOffset = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
+  return {
+    pageX: obj.pageX - scrollXOffset,
+    pageY: obj.pageY - scrollYOffset
+  };
+}
+function useColorDrag(props) {
+  var targetRef = props.targetRef,
+    containerRef = props.containerRef,
+    direction = props.direction,
+    onDragChange = props.onDragChange,
+    onDragChangeComplete = props.onDragChangeComplete,
+    calculate = props.calculate,
+    color = props.color,
+    disabledDrag = props.disabledDrag;
+  var _useState = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    offsetValue = _useState2[0],
+    setOffsetValue = _useState2[1];
+  var mouseMoveRef = useRef(null);
+  var mouseUpRef = useRef(null);
+
+  // Always get position from `color`
+  useEffect(function () {
+    setOffsetValue(calculate());
+  }, [color]);
+  useEffect(function () {
+    return function () {
+      document.removeEventListener('mousemove', mouseMoveRef.current);
+      document.removeEventListener('mouseup', mouseUpRef.current);
+      document.removeEventListener('touchmove', mouseMoveRef.current);
+      document.removeEventListener('touchend', mouseUpRef.current);
+      mouseMoveRef.current = null;
+      mouseUpRef.current = null;
+    };
+  }, []);
+  var updateOffset = function updateOffset(e) {
+    var _getPosition = getPosition(e),
+      pageX = _getPosition.pageX,
+      pageY = _getPosition.pageY;
+    var _containerRef$current = containerRef.current.getBoundingClientRect(),
+      rectX = _containerRef$current.x,
+      rectY = _containerRef$current.y,
+      width = _containerRef$current.width,
+      height = _containerRef$current.height;
+    var _targetRef$current$ge = targetRef.current.getBoundingClientRect(),
+      targetWidth = _targetRef$current$ge.width,
+      targetHeight = _targetRef$current$ge.height;
+    var centerOffsetX = targetWidth / 2;
+    var centerOffsetY = targetHeight / 2;
+    var offsetX = Math.max(0, Math.min(pageX - rectX, width)) - centerOffsetX;
+    var offsetY = Math.max(0, Math.min(pageY - rectY, height)) - centerOffsetY;
+    var calcOffset = {
+      x: offsetX,
+      y: direction === 'x' ? offsetValue.y : offsetY
+    };
+
+    // Exclusion of boundary cases
+    if (targetWidth === 0 && targetHeight === 0 || targetWidth !== targetHeight) {
+      return false;
+    }
+    onDragChange === null || onDragChange === void 0 || onDragChange(calcOffset);
+  };
+  var onDragMove = function onDragMove(e) {
+    e.preventDefault();
+    updateOffset(e);
+  };
+  var onDragStop = function onDragStop(e) {
+    e.preventDefault();
+    document.removeEventListener('mousemove', mouseMoveRef.current);
+    document.removeEventListener('mouseup', mouseUpRef.current);
+    document.removeEventListener('touchmove', mouseMoveRef.current);
+    document.removeEventListener('touchend', mouseUpRef.current);
+    mouseMoveRef.current = null;
+    mouseUpRef.current = null;
+    onDragChangeComplete === null || onDragChangeComplete === void 0 || onDragChangeComplete();
+  };
+  var onDragStart = function onDragStart(e) {
+    // https://github.com/ant-design/ant-design/issues/43529
+    document.removeEventListener('mousemove', mouseMoveRef.current);
+    document.removeEventListener('mouseup', mouseUpRef.current);
+    if (disabledDrag) {
+      return;
+    }
+    updateOffset(e);
+    document.addEventListener('mousemove', onDragMove);
+    document.addEventListener('mouseup', onDragStop);
+    document.addEventListener('touchmove', onDragMove);
+    document.addEventListener('touchend', onDragStop);
+    mouseMoveRef.current = onDragMove;
+    mouseUpRef.current = onDragStop;
+  };
+  return [offsetValue, onDragStart];
+}
+
+var Handler = function Handler(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    color = _ref.color,
+    prefixCls = _ref.prefixCls;
+  return /*#__PURE__*/a__default.createElement("div", {
+    className: classNames("".concat(prefixCls, "-handler"), _defineProperty({}, "".concat(prefixCls, "-handler-sm"), size === 'small')),
+    style: {
+      backgroundColor: color
+    }
+  });
+};
+
+var Palette = function Palette(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    prefixCls = _ref.prefixCls;
+  return /*#__PURE__*/a__default.createElement("div", {
+    className: "".concat(prefixCls, "-palette"),
+    style: _objectSpread2({
+      position: 'relative'
+    }, style)
+  }, children);
+};
+
+var Transform = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    x = props.x,
+    y = props.y;
+  return /*#__PURE__*/a__default.createElement("div", {
+    ref: ref,
+    style: {
+      position: 'absolute',
+      left: "".concat(x, "%"),
+      top: "".concat(y, "%"),
+      zIndex: 1,
+      transform: 'translate(-50%, -50%)'
+    }
+  }, children);
+});
+
+var Picker = function Picker(_ref) {
+  var color = _ref.color,
+    onChange = _ref.onChange,
+    prefixCls = _ref.prefixCls,
+    onChangeComplete = _ref.onChangeComplete,
+    disabled = _ref.disabled;
+  var pickerRef = useRef();
+  var transformRef = useRef();
+  var colorRef = useRef(color);
+  var onDragChange = useEvent(function (offsetValue) {
+    var calcColor = calculateColor({
+      offset: offsetValue,
+      targetRef: transformRef,
+      containerRef: pickerRef,
+      color: color
+    });
+    colorRef.current = calcColor;
+    onChange(calcColor);
+  });
+  var _useColorDrag = useColorDrag({
+      color: color,
+      containerRef: pickerRef,
+      targetRef: transformRef,
+      calculate: function calculate() {
+        return calcOffset(color);
+      },
+      onDragChange: onDragChange,
+      onDragChangeComplete: function onDragChangeComplete() {
+        return onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(colorRef.current);
+      },
+      disabledDrag: disabled
+    }),
+    _useColorDrag2 = _slicedToArray(_useColorDrag, 2),
+    offset = _useColorDrag2[0],
+    dragStartHandle = _useColorDrag2[1];
+  return /*#__PURE__*/a__default.createElement("div", {
+    ref: pickerRef,
+    className: "".concat(prefixCls, "-select"),
+    onMouseDown: dragStartHandle,
+    onTouchStart: dragStartHandle
+  }, /*#__PURE__*/a__default.createElement(Palette, {
+    prefixCls: prefixCls
+  }, /*#__PURE__*/a__default.createElement(Transform, {
+    x: offset.x,
+    y: offset.y,
+    ref: transformRef
+  }, /*#__PURE__*/a__default.createElement(Handler, {
+    color: color.toRgbString(),
+    prefixCls: prefixCls
+  })), /*#__PURE__*/a__default.createElement("div", {
+    className: "".concat(prefixCls, "-saturation"),
+    style: {
+      backgroundColor: "hsl(".concat(color.toHsb().h, ",100%, 50%)"),
+      backgroundImage: 'linear-gradient(0deg, #000, transparent),linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0))'
+    }
+  })));
+};
+
+var useColorState = function useColorState(defaultValue, value) {
+  var _useMergedState = useMergedState(defaultValue, {
+      value: value
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    mergedValue = _useMergedState2[0],
+    setValue = _useMergedState2[1];
+  var color = useMemo$1(function () {
+    return generateColor$1(mergedValue);
+  }, [mergedValue]);
+  return [color, setValue];
+};
+
+var Gradient = function Gradient(_ref) {
+  var colors = _ref.colors,
+    children = _ref.children,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'to right' : _ref$direction,
+    type = _ref.type,
+    prefixCls = _ref.prefixCls;
+  var gradientColors = useMemo$1(function () {
+    return colors.map(function (color, idx) {
+      var result = generateColor$1(color);
+      if (type === 'alpha' && idx === colors.length - 1) {
+        result = new Color(result.setA(1));
+      }
+      return result.toRgbString();
+    }).join(',');
+  }, [colors, type]);
+  return /*#__PURE__*/a__default.createElement("div", {
+    className: "".concat(prefixCls, "-gradient"),
+    style: {
+      position: 'absolute',
+      inset: 0,
+      background: "linear-gradient(".concat(direction, ", ").concat(gradientColors, ")")
+    }
+  }, children);
+};
+
+var Slider = function Slider(props) {
+  var prefixCls = props.prefixCls,
+    colors = props.colors,
+    disabled = props.disabled,
+    onChange = props.onChange,
+    onChangeComplete = props.onChangeComplete,
+    color = props.color,
+    type = props.type;
+  var sliderRef = useRef();
+  var transformRef = useRef();
+  var colorRef = useRef(color);
+  var getValue = function getValue(c) {
+    return type === 'hue' ? c.getHue() : c.a * 100;
+  };
+  var onDragChange = useEvent(function (offsetValue) {
+    var calcColor = calculateColor({
+      offset: offsetValue,
+      targetRef: transformRef,
+      containerRef: sliderRef,
+      color: color,
+      type: type
+    });
+    colorRef.current = calcColor;
+    onChange(getValue(calcColor));
+  });
+  var _useColorDrag = useColorDrag({
+      color: color,
+      targetRef: transformRef,
+      containerRef: sliderRef,
+      calculate: function calculate() {
+        return calcOffset(color, type);
+      },
+      onDragChange: onDragChange,
+      onDragChangeComplete: function onDragChangeComplete() {
+        onChangeComplete(getValue(colorRef.current));
+      },
+      direction: 'x',
+      disabledDrag: disabled
+    }),
+    _useColorDrag2 = _slicedToArray(_useColorDrag, 2),
+    offset = _useColorDrag2[0],
+    dragStartHandle = _useColorDrag2[1];
+  var handleColor = a__default.useMemo(function () {
+    if (type === 'hue') {
+      var hsb = color.toHsb();
+      hsb.s = 1;
+      hsb.b = 1;
+      hsb.a = 1;
+      var lightColor = new Color(hsb);
+      return lightColor;
+    }
+    return color;
+  }, [color, type]);
+
+  // ========================= Gradient =========================
+  var gradientList = a__default.useMemo(function () {
+    return colors.map(function (info) {
+      return "".concat(info.color, " ").concat(info.percent, "%");
+    });
+  }, [colors]);
+
+  // ========================== Render ==========================
+  return /*#__PURE__*/a__default.createElement("div", {
+    ref: sliderRef,
+    className: classNames("".concat(prefixCls, "-slider"), "".concat(prefixCls, "-slider-").concat(type)),
+    onMouseDown: dragStartHandle,
+    onTouchStart: dragStartHandle
+  }, /*#__PURE__*/a__default.createElement(Palette, {
+    prefixCls: prefixCls
+  }, /*#__PURE__*/a__default.createElement(Transform, {
+    x: offset.x,
+    y: offset.y,
+    ref: transformRef
+  }, /*#__PURE__*/a__default.createElement(Handler, {
+    size: "small",
+    color: handleColor.toHexString(),
+    prefixCls: prefixCls
+  })), /*#__PURE__*/a__default.createElement(Gradient, {
+    colors: gradientList,
+    type: type,
+    prefixCls: prefixCls
+  })));
+};
+
+function useComponent(components) {
+  return a$m.useMemo(function () {
+    var _ref = components || {},
+      slider = _ref.slider;
+    return [slider || Slider];
+  }, [components]);
+}
+
+var HUE_COLORS = [{
+  color: 'rgb(255, 0, 0)',
+  percent: 0
+}, {
+  color: 'rgb(255, 255, 0)',
+  percent: 17
+}, {
+  color: 'rgb(0, 255, 0)',
+  percent: 33
+}, {
+  color: 'rgb(0, 255, 255)',
+  percent: 50
+}, {
+  color: 'rgb(0, 0, 255)',
+  percent: 67
+}, {
+  color: 'rgb(255, 0, 255)',
+  percent: 83
+}, {
+  color: 'rgb(255, 0, 0)',
+  percent: 100
+}];
+var ColorPicker = /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? ColorPickerPrefixCls : _props$prefixCls,
+    onChange = props.onChange,
+    onChangeComplete = props.onChangeComplete,
+    className = props.className,
+    style = props.style,
+    panelRender = props.panelRender,
+    _props$disabledAlpha = props.disabledAlpha,
+    disabledAlpha = _props$disabledAlpha === void 0 ? false : _props$disabledAlpha,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    components = props.components;
+
+  // ========================== Components ==========================
+  var _useComponent = useComponent(components),
+    _useComponent2 = _slicedToArray(_useComponent, 1),
+    Slider = _useComponent2[0];
+
+  // ============================ Color =============================
+  var _useColorState = useColorState(defaultValue || defaultColor, value),
+    _useColorState2 = _slicedToArray(_useColorState, 2),
+    colorValue = _useColorState2[0],
+    setColorValue = _useColorState2[1];
+  var alphaColor = useMemo$1(function () {
+    return colorValue.setA(1).toRgbString();
+  }, [colorValue]);
+
+  // ============================ Events ============================
+  var handleChange = function handleChange(data, type) {
+    if (!value) {
+      setColorValue(data);
+    }
+    onChange === null || onChange === void 0 || onChange(data, type);
+  };
+
+  // Convert
+  var getHueColor = function getHueColor(hue) {
+    return new Color(colorValue.setHue(hue));
+  };
+  var getAlphaColor = function getAlphaColor(alpha) {
+    return new Color(colorValue.setA(alpha / 100));
+  };
+
+  // Slider change
+  var onHueChange = function onHueChange(hue) {
+    handleChange(getHueColor(hue), {
+      type: 'hue',
+      value: hue
+    });
+  };
+  var onAlphaChange = function onAlphaChange(alpha) {
+    handleChange(getAlphaColor(alpha), {
+      type: 'alpha',
+      value: alpha
+    });
+  };
+
+  // Complete
+  var onHueChangeComplete = function onHueChangeComplete(hue) {
+    if (onChangeComplete) {
+      onChangeComplete(getHueColor(hue));
+    }
+  };
+  var onAlphaChangeComplete = function onAlphaChangeComplete(alpha) {
+    if (onChangeComplete) {
+      onChangeComplete(getAlphaColor(alpha));
+    }
+  };
+
+  // ============================ Render ============================
+  var mergeCls = classNames("".concat(prefixCls, "-panel"), className, _defineProperty({}, "".concat(prefixCls, "-panel-disabled"), disabled));
+  var sharedSliderProps = {
+    prefixCls: prefixCls,
+    disabled: disabled,
+    color: colorValue
+  };
+  var defaultPanel = /*#__PURE__*/a__default.createElement(a__default.Fragment, null, /*#__PURE__*/a__default.createElement(Picker, _extends({
+    onChange: handleChange
+  }, sharedSliderProps, {
+    onChangeComplete: onChangeComplete
+  })), /*#__PURE__*/a__default.createElement("div", {
+    className: "".concat(prefixCls, "-slider-container")
+  }, /*#__PURE__*/a__default.createElement("div", {
+    className: classNames("".concat(prefixCls, "-slider-group"), _defineProperty({}, "".concat(prefixCls, "-slider-group-disabled-alpha"), disabledAlpha))
+  }, /*#__PURE__*/a__default.createElement(Slider, _extends({}, sharedSliderProps, {
+    type: "hue",
+    colors: HUE_COLORS,
+    min: 0,
+    max: 359,
+    value: colorValue.getHue(),
+    onChange: onHueChange,
+    onChangeComplete: onHueChangeComplete
+  })), !disabledAlpha && /*#__PURE__*/a__default.createElement(Slider, _extends({}, sharedSliderProps, {
+    type: "alpha",
+    colors: [{
+      percent: 0,
+      color: 'rgba(255, 0, 4, 0)'
+    }, {
+      percent: 100,
+      color: alphaColor
+    }],
+    min: 0,
+    max: 100,
+    value: colorValue.a * 100,
+    onChange: onAlphaChange,
+    onChangeComplete: onAlphaChangeComplete
+  }))), /*#__PURE__*/a__default.createElement(ColorBlock, {
+    color: colorValue.toRgbString(),
+    prefixCls: prefixCls
+  })));
+  return /*#__PURE__*/a__default.createElement("div", {
+    className: mergeCls,
+    style: style,
+    ref: ref
+  }, typeof panelRender === 'function' ? panelRender(defaultPanel) : defaultPanel);
+});
+if (process.env.NODE_ENV !== 'production') {
+  ColorPicker.displayName = 'ColorPicker';
+}
+
+const toHexFormat = (value, alpha) => (value === null || value === void 0 ? void 0 : value.replace(/[^\w/]/g, '').slice(0, alpha ? 8 : 6)) || '';
+const getHex = (value, alpha) => value ? toHexFormat(value, alpha) : '';
+let AggregationColor = /*#__PURE__*/function () {
+  function AggregationColor(color) {
+    _classCallCheck(this, AggregationColor);
+    var _a;
+    this.cleared = false;
+    // Clone from another AggregationColor
+    if (color instanceof AggregationColor) {
+      this.metaColor = color.metaColor.clone();
+      this.colors = (_a = color.colors) === null || _a === void 0 ? void 0 : _a.map(info => ({
+        color: new AggregationColor(info.color),
+        percent: info.percent
+      }));
+      this.cleared = color.cleared;
+      return;
+    }
+    const isArray = Array.isArray(color);
+    if (isArray && color.length) {
+      this.colors = color.map(({
+        color: c,
+        percent
+      }) => ({
+        color: new AggregationColor(c),
+        percent
+      }));
+      this.metaColor = new Color(this.colors[0].color.metaColor);
+    } else {
+      this.metaColor = new Color(isArray ? '' : color);
+    }
+    if (!color || isArray && !this.colors) {
+      this.metaColor = this.metaColor.setA(0);
+      this.cleared = true;
+    }
+  }
+  return _createClass(AggregationColor, [{
+    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.a < 1);
+    }
+  }, {
+    key: "toHexString",
+    value: function toHexString() {
+      return this.metaColor.toHexString();
+    }
+  }, {
+    key: "toRgb",
+    value: function toRgb() {
+      return this.metaColor.toRgb();
+    }
+  }, {
+    key: "toRgbString",
+    value: function toRgbString() {
+      return this.metaColor.toRgbString();
+    }
+  }, {
+    key: "isGradient",
+    value: function isGradient() {
+      return !!this.colors && !this.cleared;
+    }
+  }, {
+    key: "getColors",
+    value: function getColors() {
+      return this.colors || [{
+        color: this,
+        percent: 0
+      }];
+    }
+  }, {
+    key: "toCssString",
+    value: function toCssString() {
+      const {
+        colors
+      } = this;
+      // CSS line-gradient
+      if (colors) {
+        const colorsStr = colors.map(c => `${c.color.toRgbString()} ${c.percent}%`).join(', ');
+        return `linear-gradient(90deg, ${colorsStr})`;
+      }
+      return this.metaColor.toRgbString();
+    }
+  }, {
+    key: "equals",
+    value: function equals(color) {
+      if (!color || this.isGradient() !== color.isGradient()) {
+        return false;
+      }
+      if (!this.isGradient()) {
+        return this.toHexString() === color.toHexString();
+      }
+      return this.colors.length === color.colors.length && this.colors.every((c, i) => {
+        const target = color.colors[i];
+        return c.percent === target.percent && c.color.equals(target.color);
+      });
+    }
+  }]);
+}();
+
 const initMotionCommon = duration => ({
   animationDuration: duration,
   animationFillMode: 'both'
@@ -10472,6 +11187,13 @@ const initZoomMotion = (token, motionName) => {
   }];
 };
 
+const generateColor = color => {
+  if (color instanceof AggregationColor) {
+    return color;
+  }
+  return new AggregationColor(color);
+};
+
 var OrderContext = /*#__PURE__*/a$m.createContext(null);
 
 var EMPTY_LIST = [];
@@ -10865,6 +11587,7 @@ function newMessages() {
       float: '%s is not a %s',
       regexp: '%s is not a valid %s',
       email: '%s is not a valid %s',
+      tel: '%s is not a valid %s',
       url: '%s is not a valid %s',
       hex: '%s is not a valid %s'
     },
@@ -11003,7 +11726,7 @@ function format(template) {
   return template;
 }
 function isNativeStringType(type) {
-  return type === 'string' || type === 'url' || type === 'hex' || type === 'email' || type === 'date' || type === 'pattern';
+  return type === 'string' || type === 'url' || type === 'hex' || type === 'email' || type === 'date' || type === 'pattern' || type === 'tel';
 }
 function isEmptyValue(value, type) {
   if (value === undefined || value === null) {
@@ -11307,6 +12030,13 @@ var pattern$1 = {
   //   '^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$',
   //   'i',
   // ),
+  /**
+   * Phone number regex, support country code, brackets, spaces, and dashes (or non-breaking hyphen \u2011).
+   * @see https://regexr.com/3c53v
+   * @see https://ihateregex.io/expr/phone/
+   * @see https://developers.google.com/style/phone-numbers using non-breaking hyphen \u2011
+   */
+  tel: /^(\+[0-9]{1,3}[-\s\u2011]?)?(\([0-9]{1,4}\)[-\s\u2011]?)?([0-9]+[-\s\u2011]?)*[0-9]+$/,
   hex: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i
 };
 var types = {
@@ -11347,6 +12077,9 @@ var types = {
   email: function email(value) {
     return typeof value === 'string' && value.length <= 320 && !!value.match(pattern$1.email);
   },
+  tel: function tel(value) {
+    return typeof value === 'string' && value.length <= 32 && !!value.match(pattern$1.tel);
+  },
   url: function url(value) {
     return typeof value === 'string' && value.length <= 2048 && !!value.match(getUrlRegex());
   },
@@ -11359,7 +12092,7 @@ var type$1 = function type(rule, value, source, errors, options) {
     required$1(rule, value, source, errors, options);
     return;
   }
-  var custom = ['integer', 'float', 'array', 'regexp', 'object', 'method', 'email', 'number', 'date', 'url', 'hex'];
+  var custom = ['integer', 'float', 'array', 'regexp', 'object', 'method', 'email', 'tel', 'number', 'date', 'url', 'hex'];
   var ruleType = rule.type;
   if (custom.indexOf(ruleType) > -1) {
     if (!types[ruleType](value)) {
@@ -11653,6 +12386,7 @@ var validators = {
   url: type,
   hex: type,
   email: type,
+  tel: type,
   required: required,
   any: any
 };
@@ -11804,7 +12538,7 @@ var Schema = /*#__PURE__*/function () {
           if (!options.suppressWarning && errorList.length) {
             Schema.warning('async-validator:', errorList);
           }
-          if (errorList.length && rule.message !== undefined) {
+          if (errorList.length && rule.message !== undefined && rule.message !== null) {
             errorList = [].concat(rule.message);
           }
 
@@ -12070,7 +12804,7 @@ function _validateRule() {
             });
           }
         case 18:
-          if (!(!result.length && subRuleField)) {
+          if (!(!result.length && subRuleField && Array.isArray(value) && value.length > 0)) {
             _context2.next = 23;
             break;
           }
@@ -15407,12 +16141,12 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
       var offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
       if (_scaleX === 1) {
-        nextOffsetX = Math.round(nextOffsetX);
-        offsetX4Right = Math.round(offsetX4Right);
+        nextOffsetX = Math.floor(nextOffsetX);
+        offsetX4Right = Math.floor(offsetX4Right);
       }
       if (_scaleY === 1) {
-        nextOffsetY = Math.round(nextOffsetY);
-        offsetY4Bottom = Math.round(offsetY4Bottom);
+        nextOffsetY = Math.floor(nextOffsetY);
+        offsetY4Bottom = Math.floor(offsetY4Bottom);
       }
       var nextOffsetInfo = {
         ready: true,
@@ -15962,6 +16696,10 @@ function generateTrigger() {
       cloneProps.className = classNames(originChildProps.className, className);
     }
 
+    // ============================ Perf ============================
+    var renderedRef = a$m.useRef(false);
+    renderedRef.current || (renderedRef.current = forceRender || mergedOpen || inMotion);
+
     // =========================== Render ===========================
     var mergedChildrenProps = _objectSpread2(_objectSpread2({}, originChildProps), cloneProps);
 
@@ -15996,7 +16734,7 @@ function generateTrigger() {
       onResize: onTargetResize
     }, /*#__PURE__*/a$m.createElement(TriggerWrapper, {
       getTriggerDOMNode: getTriggerDOMNode
-    }, triggerNode)), /*#__PURE__*/a$m.createElement(TriggerContext.Provider, {
+    }, triggerNode)), renderedRef.current && /*#__PURE__*/a$m.createElement(TriggerContext.Provider, {
       value: context
     }, /*#__PURE__*/a$m.createElement(Popup$1, {
       portal: PortalComponent,
@@ -16166,7 +16904,7 @@ var placements = {
 };
 
 var _excluded = ["overlayClassName", "trigger", "mouseEnterDelay", "mouseLeaveDelay", "overlayStyle", "prefixCls", "children", "onVisibleChange", "afterVisibleChange", "transitionName", "animation", "motion", "placement", "align", "destroyTooltipOnHide", "defaultVisible", "getTooltipContainer", "overlayInnerStyle", "arrowContent", "overlay", "id", "showArrow", "classNames", "styles"];
-var Tooltip$2 = function Tooltip(props, ref) {
+var Tooltip$3 = function Tooltip(props, ref) {
   var overlayClassName = props.overlayClassName,
     _props$trigger = props.trigger,
     trigger = _props$trigger === void 0 ? ['hover'] : _props$trigger,
@@ -16249,7 +16987,7 @@ var Tooltip$2 = function Tooltip(props, ref) {
     arrow: showArrow
   }, extraProps), getChildren());
 };
-var Tooltip$3 = /*#__PURE__*/forwardRef(Tooltip$2);
+var Tooltip$2 = /*#__PURE__*/forwardRef(Tooltip$3);
 
 function getArrowToken(token) {
   const {
@@ -16587,6 +17325,11 @@ function getPlacements(config) {
     borderRadius} = config;
   const halfArrowWidth = arrowWidth / 2;
   const placementMap = {};
+  // Dynamic offset
+  const arrowOffset = getArrowOffsetToken({
+    contentRadius: borderRadius,
+    limitVerticalRadius: true
+  });
   Object.keys(PlacementAlignMap).forEach(key => {
     const template = arrowPointAtCenter && ArrowCenterPlacementAlignMap[key] || PlacementAlignMap[key];
     const placementInfo = Object.assign(Object.assign({}, template), {
@@ -16621,11 +17364,6 @@ function getPlacements(config) {
         placementInfo.offset[0] = halfArrowWidth + offset;
         break;
     }
-    // Dynamic offset
-    const arrowOffset = getArrowOffsetToken({
-      contentRadius: borderRadius,
-      limitVerticalRadius: true
-    });
     if (arrowPointAtCenter) {
       switch (key) {
         case 'topLeft':
@@ -16697,7 +17435,7 @@ const genTooltipStyle = token => {
         minWidth: centerAlignMinWidth,
         minHeight: controlHeight,
         padding: `${unit$1(token.calc(paddingSM).div(2).equal())} ${unit$1(paddingXS)}`,
-        color: tooltipColor,
+        color: `var(--ant-tooltip-color, ${tooltipColor})`,
         textAlign: 'start',
         textDecoration: 'none',
         wordWrap: 'break-word',
@@ -16800,8 +17538,12 @@ function parseColor(prefixCls, color) {
   });
   const overlayStyle = {};
   const arrowStyle = {};
+  const rgb = generateColor(color).toRgb();
+  const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+  const textColor = luminance < 0.5 ? '#FFF' : '#000';
   if (color && !isInternalColor) {
     overlayStyle.background = color;
+    overlayStyle['--ant-tooltip-color'] = textColor;
     // @ts-ignore
     arrowStyle['--antd-arrow-background-color'] = color;
   }
@@ -16871,7 +17613,7 @@ const InternalTooltip = /*#__PURE__*/a$m.forwardRef((props, ref) => {
       builtinPlacements,
       arrowPointAtCenter = false,
       autoAdjustOverflow = true,
-      motion,
+      motion: _motion,
       getPopupContainer,
       placement = 'top',
       mouseEnterDelay = 0.1,
@@ -16980,7 +17722,7 @@ const InternalTooltip = /*#__PURE__*/a$m.forwardRef((props, ref) => {
   const bodyClassNames = classNames(contextClassNames.body, tooltipClassNames === null || tooltipClassNames === void 0 ? void 0 : tooltipClassNames.body);
   // ============================ zIndex ============================
   const [zIndex, contextZIndex] = useZIndex('Tooltip', restProps.zIndex);
-  const content = /*#__PURE__*/a$m.createElement(Tooltip$3, Object.assign({}, restProps, {
+  const content = /*#__PURE__*/a$m.createElement(Tooltip$2, Object.assign({}, restProps, {
     zIndex: zIndex,
     showArrow: mergedShowArrow,
     placement: placement,
@@ -17454,7 +18196,7 @@ const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter P
         a__default.createElement(CustomIconButton$2, { variant: "tertiary", iconName: show ? "eye" : "eye-slash", ariaLabel: show ? "Hide" : "Show", onClick: () => setShow(!show), disabled: disabled })));
 };
 
-const formatDynamicNumbersWithCommas = (num, decimalPlaces) => {
+const formatDynamicNumbersWithCommas = (num, decimalPlaces, isDegrees) => {
     const onlyDigitNum = num.toString().replace(/[^\d.-]/g, "");
     const decimalEnding = onlyDigitNum.endsWith(".");
     const zeroEnding = onlyDigitNum.includes(".") && onlyDigitNum.endsWith("0");
@@ -17464,21 +18206,21 @@ const formatDynamicNumbersWithCommas = (num, decimalPlaces) => {
         decimalTrailingZeros = match ? match[0] : "";
     }
     const decimalZero = onlyDigitNum.endsWith(`.${decimalTrailingZeros.length > 0 ? decimalTrailingZeros : "0"}`);
-    if (onlyDigitNum === "" || onlyDigitNum === "-" || onlyDigitNum === ".") {
-        return onlyDigitNum;
+    if (onlyDigitNum === "-" || onlyDigitNum === ".") {
+        return `${onlyDigitNum}${isDegrees ? "°" : ""}`;
     }
-    if (isNaN(Number(onlyDigitNum))) {
+    if (isNaN(Number(onlyDigitNum)) || onlyDigitNum === "") {
         return "";
     }
     return onlyDigitNum
         ? `${Number(onlyDigitNum).toLocaleString("en-US", {
             minimumFractionDigits: 0,
             maximumFractionDigits: decimalPlaces,
-        })}${decimalEnding ? "." : ""}${decimalZero ? "." : ""}${zeroEnding ? `${decimalTrailingZeros}` : ""}`
+        })}${decimalEnding ? "." : ""}${decimalZero ? "." : ""}${zeroEnding ? `${decimalTrailingZeros}` : ""}${isDegrees ? "°" : ""}`
         : "";
 };
 
-const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "0", textAlign = "left", isTruncated = false, helperTextAffectLayout = true, hideLabel = false, disabled = false, isLoading = false, hasError = false, thousandSeparator = true, decimalPlaces = 0, allowNegativeNumbers = false, ariaDescribedBy, enableAutocomplete = false, }) => {
+const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "0", textAlign = "left", isTruncated = false, helperTextAffectLayout = true, hideLabel = false, disabled = false, isLoading = false, hasError = false, thousandSeparator = true, decimalPlaces = 0, allowNegativeNumbers = false, ariaDescribedBy, enableAutocomplete = false, isDegrees = false, }) => {
     const containerProps = {
         id,
         label,
@@ -17497,7 +18239,25 @@ const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, la
     };
     const [inputValue, setInputValue] = useState("");
     const [placeholderText, setPlaceholderText] = useState(placeholder);
+    const ref = useRef(null);
     const valueToUse = value ?? inputValue;
+    const moveCursorBeforeDegree = () => {
+        const pos = ref.current?.selectionStart ?? 0;
+        const maxPos = (ref.current && ref.current.value.length - 1) ?? 0;
+        if (pos > maxPos && isDegrees) {
+            requestAnimationFrame(() => {
+                const pos = ref.current && ref.current.value.length - 1;
+                ref.current?.setSelectionRange(pos, pos);
+            });
+        }
+    };
+    const handleSelect = (e) => {
+        const pos = e.currentTarget.selectionStart ?? 0;
+        const maxPos = e.currentTarget.value.length - 1;
+        if (pos > maxPos && isDegrees) {
+            e.currentTarget.setSelectionRange(maxPos, maxPos);
+        }
+    };
     const handleKeyDown = (e) => {
         if (e.key === "," ||
             (e.key === "." && decimalPlaces === 0) ||
@@ -17508,10 +18268,14 @@ const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, la
         }
     };
     const handleChange = (e) => {
+        moveCursorBeforeDegree();
         const value = e.target.value;
-        const inputDecimalPlaces = value.includes(".")
+        let inputDecimalPlaces = value.includes(".")
             ? value.split(".")[1].length
             : 0;
+        if (isDegrees && inputDecimalPlaces > 0) {
+            inputDecimalPlaces -= 1;
+        }
         if (e.currentTarget.checkValidity() &&
             inputDecimalPlaces <= decimalPlaces) {
             setInputValue(value);
@@ -17526,19 +18290,19 @@ const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, la
     const handleFocus = (e) => {
         onFocus?.(e.target.value);
         !onFocus && setPlaceholderText("");
+        isDegrees && moveCursorBeforeDegree();
     };
     return (a__default.createElement(TextFieldContainer, { ...containerProps },
-        a__default.createElement(TextFieldInput, { autoComplete: enableAutocomplete ? "on" : "off", "aria-describedby": `${id}-helper-text ${ariaDescribedBy}`, type: "text", inputMode: "numeric", 
-            // prettier-ignore
-            pattern: allowNegativeNumbers ? "^[\\d,\\.\\-]*$" : "^[\\d,\\.]*$", id: `${id}-text-field`, disabled: disabled || isLoading, placeholder: placeholderText, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, value: thousandSeparator
-                ? formatDynamicNumbersWithCommas(valueToUse, decimalPlaces)
+        a__default.createElement(TextFieldInput, { ref: ref, autoComplete: enableAutocomplete ? "on" : "off", "aria-describedby": `${id}-helper-text ${ariaDescribedBy}`, type: "text", inputMode: "numeric", pattern: allowNegativeNumbers ? "^[\\d,.\\-°]*$" : "^[\\d,.°]*$", id: `${id}-text-field`, disabled: disabled || isLoading, placeholder: placeholderText, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onClick: isDegrees ? moveCursorBeforeDegree : undefined, onKeyUp: isDegrees ? moveCursorBeforeDegree : undefined, onSelect: handleSelect, value: thousandSeparator
+                ? formatDynamicNumbersWithCommas(valueToUse, decimalPlaces, isDegrees)
                 : valueToUse, maxLength: maxLength &&
                 maxLength +
                     (thousandSeparator
                         ? Math.floor(valueToUse.toString().split(".")[0].length / 4)
                         : 0) +
                     (inputValue.includes(".") ? 1 : 0) +
-                    (inputValue.includes("-") ? 1 : 0), "$isTruncated": isTruncated, "$textAlign": textAlign, "$isDisabled": disabled, "$isLoading": isLoading, ...htmlProps })));
+                    (inputValue.includes("-") ? 1 : 0) +
+                    (inputValue.includes("°") ? 1 : 0), "$isTruncated": isTruncated, "$textAlign": textAlign, "$isDisabled": disabled, "$isLoading": isLoading, ...htmlProps })));
 };
 
 /**
@@ -22283,9 +23047,12 @@ const NotificationBubble = styled.span `
 `;
 
 const Tab = ({ id, className, onClick, htmlProps, label, variant = "light", active = false, notifications, }) => {
+    const notificationText = typeof notifications === "number" && notifications <= 0
+        ? undefined
+        : notifications;
     return (a__default.createElement(TabButton, { id: id, "$variant": variant, className: `${className} ${active && "active"}`, onClick: () => onClick?.(label), ...htmlProps },
         label,
-        !!(notifications && notifications > 0) && (a__default.createElement(NotificationBubble, { "$isActive": active }, notifications))));
+        !!notificationText && (a__default.createElement(NotificationBubble, { "$isActive": active }, notificationText))));
 };
 
 const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant = "light", isPill, }) => {