@chaoswise/ui 3.0.6 → 3.0.7

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

@@ -0,0 +1,318 @@
+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 } from '../../style';
+import { genCollapseMotion, zoomIn } from '../../style/motion';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+import genFormValidateMotionStyle from './explain';
+var resetForm = function resetForm(token) {
+  return _defineProperty(_defineProperty({
+    legend: {
+      display: 'block',
+      width: '100%',
+      marginBottom: token.marginLG,
+      padding: 0,
+      color: token.colorTextDescription,
+      fontSize: token.fontSizeLG,
+      lineHeight: 'inherit',
+      border: 0,
+      borderBottom: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorBorder)
+    },
+    'input[type="search"]': {
+      boxSizing: 'border-box'
+    },
+    // Position radios and checkboxes better
+    'input[type="radio"], input[type="checkbox"]': {
+      lineHeight: 'normal'
+    },
+    'input[type="file"]': {
+      display: 'block'
+    },
+    // Make range inputs behave like textual form controls
+    'input[type="range"]': {
+      display: 'block',
+      width: '100%'
+    },
+    // Make multiple select elements height not fixed
+    'select[multiple], select[size]': {
+      height: 'auto'
+    }
+  }, "input[type='file']:focus,\n  input[type='radio']:focus,\n  input[type='checkbox']:focus", {
+    outline: 0,
+    boxShadow: "0 0 0 ".concat(unit(token.controlOutlineWidth), " ").concat(token.controlOutline)
+  }), "output", {
+    display: 'block',
+    paddingTop: 15,
+    color: token.colorText,
+    fontSize: token.fontSize,
+    lineHeight: token.lineHeight
+  });
+};
+var genFormSize = function genFormSize(token, height) {
+  var formItemCls = token.formItemCls;
+  return _defineProperty({}, formItemCls, _defineProperty(_defineProperty({}, "".concat(formItemCls, "-label > label"), {
+    height: height
+  }), "".concat(formItemCls, "-control-input"), {
+    minHeight: height
+  }));
+};
+var genFormStyle = function genFormStyle(token) {
+  var componentCls = token.componentCls;
+  return _defineProperty({}, token.componentCls, _objectSpread(_objectSpread(_objectSpread({}, resetComponent(token)), resetForm(token)), {}, _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-text"), {
+    display: 'inline-block',
+    paddingInlineEnd: token.paddingSM
+  }), '&-small', _objectSpread({}, genFormSize(token, token.controlHeightSM))), '&-large', _objectSpread({}, genFormSize(token, token.controlHeightLG)))));
+};
+var genFormItemStyle = function genFormItemStyle(token) {
+  var formItemCls = token.formItemCls,
+    iconCls = token.iconCls,
+    componentCls = token.componentCls,
+    rootPrefixCls = token.rootPrefixCls,
+    labelRequiredMarkColor = token.labelRequiredMarkColor,
+    labelColor = token.labelColor,
+    labelFontSize = token.labelFontSize,
+    labelHeight = token.labelHeight,
+    labelColonMarginInlineStart = token.labelColonMarginInlineStart,
+    labelColonMarginInlineEnd = token.labelColonMarginInlineEnd,
+    itemMarginBottom = token.itemMarginBottom;
+  return _defineProperty({}, formItemCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    marginBottom: itemMarginBottom,
+    verticalAlign: 'top',
+    '&-with-help': {
+      transition: 'none'
+    }
+  }, "&-hidden,\n        &-hidden.".concat(rootPrefixCls, "-row"), {
+    // https://github.com/ant-design/ant-design/issues/26141
+    display: 'none'
+  }), '&-has-warning', _defineProperty({}, "".concat(formItemCls, "-split"), {
+    color: token.colorError
+  })), '&-has-error', _defineProperty({}, "".concat(formItemCls, "-split"), {
+    color: token.colorWarning
+  })), "".concat(formItemCls, "-label"), {
+    flexGrow: 0,
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textAlign: 'end',
+    verticalAlign: 'middle',
+    '&-left': {
+      textAlign: 'start'
+    },
+    '&-wrap': {
+      overflow: 'unset',
+      lineHeight: token.lineHeight,
+      whiteSpace: 'unset'
+    },
+    '> label': _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      maxWidth: '100%',
+      height: labelHeight,
+      color: labelColor,
+      fontSize: labelFontSize
+    }, "> ".concat(iconCls), {
+      fontSize: token.fontSize,
+      verticalAlign: 'top'
+    }), "&".concat(formItemCls, "-required:not(").concat(formItemCls, "-required-mark-optional)::before"), _defineProperty({
+      display: 'inline-block',
+      marginInlineEnd: token.marginXXS,
+      color: labelRequiredMarkColor,
+      fontSize: token.fontSize,
+      fontFamily: 'SimSun, sans-serif',
+      lineHeight: 1,
+      content: '"*"'
+    }, "".concat(componentCls, "-hide-required-mark &"), {
+      display: 'none'
+    })), "".concat(formItemCls, "-optional"), _defineProperty({
+      display: 'inline-block',
+      marginInlineStart: token.marginXXS,
+      color: token.colorTextDescription
+    }, "".concat(componentCls, "-hide-required-mark &"), {
+      display: 'none'
+    })), "".concat(formItemCls, "-tooltip"), {
+      color: token.colorTextDescription,
+      cursor: 'help',
+      writingMode: 'horizontal-tb',
+      marginInlineStart: token.marginXXS
+    }), '&::after', {
+      content: '":"',
+      position: 'relative',
+      marginBlock: 0,
+      marginInlineStart: labelColonMarginInlineStart,
+      marginInlineEnd: labelColonMarginInlineEnd
+    }), "&".concat(formItemCls, "-no-colon::after"), {
+      content: '"\\a0"'
+    })
+  }), "".concat(formItemCls, "-control"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '--ant-display', 'flex'), "flexDirection", 'column'), "flexGrow", 1), "&:first-child:not([class^=\"'".concat(rootPrefixCls, "-col-'\"]):not([class*=\"' ").concat(rootPrefixCls, "-col-'\"])"), {
+    width: '100%'
+  }), '&-input', {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: token.controlHeight,
+    '&-content': {
+      flex: 'auto',
+      maxWidth: '100%'
+    }
+  })), formItemCls, {
+    '&-explain, &-extra': {
+      clear: 'both',
+      color: token.colorTextDescription,
+      fontSize: token.fontSize,
+      lineHeight: token.lineHeight
+    },
+    '&-explain-connected': {
+      width: '100%'
+    },
+    '&-extra': {
+      minHeight: token.controlHeightSM,
+      transition: "color ".concat(token.motionDurationMid, " ").concat(token.motionEaseOut) // sync input color transition
+    },
+    '&-explain': {
+      '&-error': {
+        color: token.colorError
+      },
+      '&-warning': {
+        color: token.colorWarning
+      }
+    }
+  }), "&-with-help ".concat(formItemCls, "-explain"), {
+    height: 'auto',
+    opacity: 1
+  }), "".concat(formItemCls, "-feedback-icon"), {
+    fontSize: token.fontSize,
+    textAlign: 'center',
+    visibility: 'visible',
+    animationName: zoomIn,
+    animationDuration: token.motionDurationMid,
+    animationTimingFunction: token.motionEaseOutBack,
+    pointerEvents: 'none',
+    '&-success': {
+      color: token.colorSuccess
+    },
+    '&-error': {
+      color: token.colorError
+    },
+    '&-warning': {
+      color: token.colorWarning
+    },
+    '&-validating': {
+      color: token.colorPrimary
+    }
+  })));
+};
+var genHorizontalStyle = function genHorizontalStyle(token) {
+  var componentCls = token.componentCls,
+    formItemCls = token.formItemCls;
+  return _defineProperty({}, "".concat(componentCls, "-horizontal"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(formItemCls, "-label"), {
+    flexGrow: 0
+  }), "".concat(formItemCls, "-control"), {
+    flex: '1 1 0',
+    // https://github.com/ant-design/ant-design/issues/32777
+    // https://github.com/ant-design/ant-design/issues/33773
+    minWidth: 0
+  }), "".concat(formItemCls, "-label[class$='-24'], ").concat(formItemCls, "-label[class*='-24 ']"), _defineProperty({}, "& + ".concat(formItemCls, "-control"), {
+    minWidth: 'unset'
+  })));
+};
+var genInlineStyle = function genInlineStyle(token) {
+  var componentCls = token.componentCls,
+    formItemCls = token.formItemCls,
+    inlineItemMarginBottom = token.inlineItemMarginBottom;
+  return _defineProperty({}, "".concat(componentCls, "-inline"), _defineProperty({
+    display: 'flex',
+    flexWrap: 'wrap'
+  }, formItemCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    flex: 'none',
+    marginInlineEnd: token.margin,
+    marginBottom: inlineItemMarginBottom,
+    '&-row': {
+      flexWrap: 'nowrap'
+    }
+  }, "> ".concat(formItemCls, "-label,\n        > ").concat(formItemCls, "-control"), {
+    display: 'inline-block',
+    verticalAlign: 'top'
+  }), "> ".concat(formItemCls, "-label"), {
+    flex: 'none'
+  }), "".concat(componentCls, "-text"), {
+    display: 'inline-block'
+  }), "".concat(formItemCls, "-has-feedback"), {
+    display: 'inline-block'
+  })));
+};
+var makeVerticalLayoutLabel = function makeVerticalLayoutLabel(token) {
+  return {
+    padding: token.verticalLabelPadding,
+    margin: token.verticalLabelMargin,
+    whiteSpace: 'initial',
+    textAlign: 'start',
+    '> label': {
+      margin: 0,
+      '&::after': {
+        // https://github.com/ant-design/ant-design/issues/43538
+        visibility: 'hidden'
+      }
+    }
+  };
+};
+var makeVerticalLayout = function makeVerticalLayout(token) {
+  var componentCls = token.componentCls,
+    formItemCls = token.formItemCls,
+    rootPrefixCls = token.rootPrefixCls;
+  return _defineProperty(_defineProperty({}, "".concat(formItemCls, " ").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)), "".concat(componentCls, ":not(").concat(componentCls, "-inline)"), _defineProperty({}, formItemCls, _defineProperty({
+    flexWrap: 'wrap'
+  }, "".concat(formItemCls, "-label, ").concat(formItemCls, "-control"), _defineProperty({}, "&:not([class*=\" ".concat(rootPrefixCls, "-col-xs\"])"), {
+    flex: '0 0 100%',
+    maxWidth: '100%'
+  }))));
+};
+var genVerticalStyle = function genVerticalStyle(token) {
+  var componentCls = token.componentCls,
+    formItemCls = token.formItemCls,
+    rootPrefixCls = token.rootPrefixCls;
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-vertical"), _defineProperty({}, formItemCls, _defineProperty({
+    '&-row': {
+      flexDirection: 'column'
+    },
+    '&-label > label': {
+      height: 'auto'
+    }
+  }, "".concat(componentCls, "-item-control"), {
+    width: '100%'
+  }))), "".concat(componentCls, "-vertical ").concat(formItemCls, "-label,\n      .").concat(rootPrefixCls, "-col-24").concat(formItemCls, "-label,\n      .").concat(rootPrefixCls, "-col-xl-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)), "@media (max-width: ".concat(unit(token.screenXSMax), ")"), [makeVerticalLayout(token), _defineProperty({}, componentCls, _defineProperty({}, ".".concat(rootPrefixCls, "-col-xs-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)))]), "@media (max-width: ".concat(unit(token.screenSMMax), ")"), _defineProperty({}, componentCls, _defineProperty({}, ".".concat(rootPrefixCls, "-col-sm-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)))), "@media (max-width: ".concat(unit(token.screenMDMax), ")"), _defineProperty({}, componentCls, _defineProperty({}, ".".concat(rootPrefixCls, "-col-md-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token)))), "@media (max-width: ".concat(unit(token.screenLGMax), ")"), _defineProperty({}, componentCls, _defineProperty({}, ".".concat(rootPrefixCls, "-col-lg-24").concat(formItemCls, "-label"), makeVerticalLayoutLabel(token))));
+};
+// ============================== Export ==============================
+export var prepareComponentToken = function prepareComponentToken(token) {
+  return {
+    labelRequiredMarkColor: token.colorError,
+    labelColor: token.colorTextHeading,
+    labelFontSize: token.fontSize,
+    labelHeight: token.controlHeight,
+    labelColonMarginInlineStart: token.marginXXS / 2,
+    labelColonMarginInlineEnd: token.marginXS,
+    itemMarginBottom: token.marginLG,
+    verticalLabelPadding: "0 0 ".concat(token.paddingXS, "px"),
+    verticalLabelMargin: 0,
+    inlineItemMarginBottom: 0
+  };
+};
+export var prepareToken = function prepareToken(token, rootPrefixCls) {
+  var formToken = mergeToken(token, {
+    formItemCls: "".concat(token.componentCls, "-item"),
+    rootPrefixCls: rootPrefixCls
+  });
+  return formToken;
+};
+export default genStyleHooks('Form', function (token, _ref10) {
+  var rootPrefixCls = _ref10.rootPrefixCls;
+  var formToken = prepareToken(token, rootPrefixCls);
+  return [genFormStyle(formToken), genFormItemStyle(formToken), genFormValidateMotionStyle(formToken), genHorizontalStyle(formToken), genInlineStyle(formToken), genVerticalStyle(formToken), genCollapseMotion(formToken), zoomIn];
+}, prepareComponentToken, {
+  // Let From style before the Grid
+  // ref https://github.com/ant-design/ant-design/issues/44386
+  order: -1000
+});

package/lib/Antd5/form/util.js

@@ -0,0 +1,39 @@
+// form item name black list.  in form ,you can use form.id get the form item element.
+// use object hasOwnProperty will get better performance if black list is longer.
+var formItemNameBlackList = ['parentNode'];
+// default form item id prefix.
+var defaultItemNamePrefixCls = 'form_item';
+export function toArray(candidate) {
+  if (candidate === undefined || candidate === false) return [];
+  return Array.isArray(candidate) ? candidate : [candidate];
+}
+export function getFieldId(namePath, formName) {
+  if (!namePath.length) {
+    return undefined;
+  }
+  var mergedId = namePath.join('_');
+  if (formName) {
+    return "".concat(formName, "_").concat(mergedId);
+  }
+  var isIllegalName = formItemNameBlackList.includes(mergedId);
+  return isIllegalName ? "".concat(defaultItemNamePrefixCls, "_").concat(mergedId) : mergedId;
+}
+/**
+ * Get merged status by meta or passed `validateStatus`.
+ */
+export function getStatus(errors, warnings, meta, defaultValidateStatus, hasFeedback, validateStatus) {
+  var status = defaultValidateStatus;
+  if (validateStatus !== undefined) {
+    status = validateStatus;
+  } else if (meta.validating) {
+    status = 'validating';
+  } else if (errors.length) {
+    status = 'error';
+  } else if (warnings.length) {
+    status = 'warning';
+  } else if (meta.touched || hasFeedback && meta.validated) {
+    // success feedback should display when pass hasFeedback prop and current value is valid value
+    status = 'success';
+  }
+  return status;
+}

package/lib/Antd5/form/validateMessagesContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+// ZombieJ: We export single file here since
+// ConfigProvider use this which will make loop deps
+// to import whole `rc-field-form`
+export default /*#__PURE__*/createContext(undefined);

package/lib/Antd5/grid/RowContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+var RowContext = /*#__PURE__*/createContext({});
+export default RowContext;

package/lib/Antd5/grid/col.js

@@ -0,0 +1,103 @@
+var _excluded = ["prefixCls", "span", "order", "offset", "push", "pull", "className", "children", "flex", "style"];
+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 _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 _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 * as React from 'react';
+import classNames from 'classnames';
+import { ConfigContext } from '../config-provider';
+import RowContext from './RowContext';
+import { useColStyle } from './style';
+function parseFlex(flex) {
+  if (typeof flex === 'number') {
+    return "".concat(flex, " ").concat(flex, " auto");
+  }
+  if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
+    return "0 0 ".concat(flex);
+  }
+  return flex;
+}
+var sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+var Col = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _React$useContext = React.useContext(ConfigContext),
+    getPrefixCls = _React$useContext.getPrefixCls,
+    direction = _React$useContext.direction;
+  var _React$useContext2 = React.useContext(RowContext),
+    gutter = _React$useContext2.gutter,
+    wrap = _React$useContext2.wrap;
+  var customizePrefixCls = props.prefixCls,
+    span = props.span,
+    order = props.order,
+    offset = props.offset,
+    push = props.push,
+    pull = props.pull,
+    className = props.className,
+    children = props.children,
+    flex = props.flex,
+    style = props.style,
+    others = _objectWithoutProperties(props, _excluded);
+  var prefixCls = getPrefixCls('col', customizePrefixCls);
+  var _useColStyle = useColStyle(prefixCls),
+    _useColStyle2 = _slicedToArray(_useColStyle, 3),
+    wrapCSSVar = _useColStyle2[0],
+    hashId = _useColStyle2[1],
+    cssVarCls = _useColStyle2[2];
+  // ===================== Size ======================
+  var sizeStyle = {};
+  var sizeClassObj = {};
+  sizes.forEach(function (size) {
+    var sizeProps = {};
+    var propSize = props[size];
+    if (typeof propSize === 'number') {
+      sizeProps.span = propSize;
+    } else if (_typeof(propSize) === 'object') {
+      sizeProps = propSize || {};
+    }
+    delete others[size];
+    sizeClassObj = _objectSpread(_objectSpread({}, sizeClassObj), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(size, "-").concat(sizeProps.span), sizeProps.span !== undefined), "".concat(prefixCls, "-").concat(size, "-order-").concat(sizeProps.order), sizeProps.order || sizeProps.order === 0), "".concat(prefixCls, "-").concat(size, "-offset-").concat(sizeProps.offset), sizeProps.offset || sizeProps.offset === 0), "".concat(prefixCls, "-").concat(size, "-push-").concat(sizeProps.push), sizeProps.push || sizeProps.push === 0), "".concat(prefixCls, "-").concat(size, "-pull-").concat(sizeProps.pull), sizeProps.pull || sizeProps.pull === 0), "".concat(prefixCls, "-rtl"), direction === 'rtl'));
+    // Responsive flex layout
+    if (sizeProps.flex) {
+      sizeClassObj["".concat(prefixCls, "-").concat(size, "-flex")] = true;
+      sizeStyle["--".concat(prefixCls, "-").concat(size, "-flex")] = parseFlex(sizeProps.flex);
+    }
+  });
+  // ==================== Normal =====================
+  var classes = classNames(prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(span), span !== undefined), "".concat(prefixCls, "-order-").concat(order), order), "".concat(prefixCls, "-offset-").concat(offset), offset), "".concat(prefixCls, "-push-").concat(push), push), "".concat(prefixCls, "-pull-").concat(pull), pull), className, sizeClassObj, hashId, cssVarCls);
+  var mergedStyle = {};
+  // Horizontal gutter use padding
+  if (gutter && gutter[0] > 0) {
+    var horizontalGutter = gutter[0] / 2;
+    mergedStyle.paddingLeft = horizontalGutter;
+    mergedStyle.paddingRight = horizontalGutter;
+  }
+  if (flex) {
+    mergedStyle.flex = parseFlex(flex);
+    // Hack for Firefox to avoid size issue
+    // https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
+    if (wrap === false && !mergedStyle.minWidth) {
+      mergedStyle.minWidth = 0;
+    }
+  }
+  // ==================== Render =====================
+  return wrapCSSVar(_jsx("div", _objectSpread(_objectSpread({}, others), {}, {
+    style: _objectSpread(_objectSpread(_objectSpread({}, mergedStyle), style), sizeStyle),
+    className: classes,
+    ref: ref,
+    children: children
+  })));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Col.displayName = 'Col';
+}
+export default Col;

package/lib/Antd5/grid/hooks/useBreakpoint.js

@@ -0,0 +1,23 @@
+import { useRef } from 'react';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import useForceUpdate from '../../_util/hooks/useForceUpdate';
+import useResponsiveObserver from '../../_util/responsiveObserver';
+function useBreakpoint() {
+  var refreshOnChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var screensRef = useRef({});
+  var forceUpdate = useForceUpdate();
+  var responsiveObserver = useResponsiveObserver();
+  useLayoutEffect(function () {
+    var token = responsiveObserver.subscribe(function (supportScreens) {
+      screensRef.current = supportScreens;
+      if (refreshOnChange) {
+        forceUpdate();
+      }
+    });
+    return function () {
+      return responsiveObserver.unsubscribe(token);
+    };
+  }, []);
+  return screensRef.current;
+}
+export default useBreakpoint;

package/lib/Antd5/grid/index.js

@@ -0,0 +1,11 @@
+import Col from './col';
+import useInternalBreakpoint from './hooks/useBreakpoint';
+import Row from './row';
+// Do not export params
+function useBreakpoint() {
+  return useInternalBreakpoint();
+}
+export { Col, Row };
+export default {
+  useBreakpoint: useBreakpoint
+};