@bifrostui/react 1.1.11-beta.0 → 1.1.11-beta.6

package/es/Stack/Stack.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { StackProps } from './Stack.types';
 import './Stack.less';
-declare const Stack: React.ForwardRefExoticComponent<Omit<StackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Stack: React.ForwardRefExoticComponent<Omit<StackProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Stack;

package/es/Stack/Stack.js

@@ -1,50 +1,81 @@
-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 = ["className", "children", "direction", "spacing", "divider", "justifyContent", "alignItems", "flexWrap", "style"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function 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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import clsx from 'clsx';
-import React from 'react';
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import clsx from "clsx";
+import React from "react";
 import "./Stack.css";
-var prefixCls = 'bui-stack';
-var Stack = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var className = props.className,
-    children = props.children,
-    direction = props.direction,
-    spacing = props.spacing,
-    divider = props.divider,
-    justifyContent = props.justifyContent,
-    alignItems = props.alignItems,
-    flexWrap = props.flexWrap,
-    style = props.style,
-    others = _objectWithoutProperties(props, _excluded);
-
-  /**
-   * js写css变量方式
-   * 可通过css直接覆盖，不需要通过style
-   * */
-  var cssProperties = {
-    '--align-items': alignItems || 'center',
-    '--justify-content': justifyContent || 'center',
-    '--flex-direction': direction || 'column',
-    '--spacing': spacing || '0',
-    '--flex-wrap': flexWrap || 'nowrap'
+const prefixCls = "bui-stack";
+const Stack = React.forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    children,
+    direction,
+    spacing,
+    divider,
+    justifyContent,
+    alignItems,
+    flexWrap,
+    style
+  } = _a, others = __objRest(_a, [
+    "className",
+    "children",
+    "direction",
+    "spacing",
+    "divider",
+    "justifyContent",
+    "alignItems",
+    "flexWrap",
+    "style"
+  ]);
+  const cssProperties = {
+    "--align-items": alignItems || "center",
+    "--justify-content": justifyContent || "center",
+    "--flex-direction": direction || "column",
+    "--spacing": spacing || "0",
+    "--flex-wrap": flexWrap || "nowrap"
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: clsx(prefixCls, className),
-    style: _objectSpread(_objectSpread({}, cssProperties), style),
-    ref: ref
-  }, others), divider ? React.Children.map(children, function (child, index) {
-    if (index < React.Children.toArray(children).length - 1) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, child, divider);
-    }
-    return child;
-  }) : children);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadValues({
+      className: clsx(prefixCls, className),
+      style: __spreadValues(__spreadValues({}, cssProperties), style),
+      ref
+    }, others),
+    divider ? React.Children.map(children, (child, index) => {
+      if (index < React.Children.toArray(children).length - 1) {
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, child, divider);
+      }
+      return child;
+    }) : children
+  );
 });
-Stack.displayName = 'BuiStack';
-export default Stack;
+Stack.displayName = "BuiStack";
+var Stack_default = Stack;
+export {
+  Stack_default as default
+};

package/es/Stack/Stack.types.js

@@ -1 +0,0 @@
-export {};

package/es/Stack/demo/StackDemo.js

@@ -1,128 +1,125 @@
-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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-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(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState } from 'react';
-import { Button, Radio, RadioGroup, Stack } from "../..";
-import "./index.css";
-var StackDemo = function StackDemo() {
-  var _useState = useState({
-      direction: '',
-      alignItems: '',
-      justifyContent: '',
-      spacing: '',
-      wrap: ''
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    stackState = _useState2[0],
-    setStackState = _useState2[1];
-  return /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Stack, _extends({
-    style: {
-      width: '150px',
-      height: '150px'
-    }
-  }, stackState), /*#__PURE__*/React.createElement(Button, null, "\u6309\u94AE1"), /*#__PURE__*/React.createElement(Button, null, "\u6309\u94AE2"), /*#__PURE__*/React.createElement(Button, null, "\u6309\u94AE3")), /*#__PURE__*/React.createElement("div", {
-    className: "bui-stack-demo-options"
-  }, /*#__PURE__*/React.createElement(RadioGroup, {
-    value: stackState.direction,
-    onChange: function onChange(e, data) {
-      setStackState(_objectSpread(_objectSpread({}, stackState), {}, {
-        direction: data.value
-      }));
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "bui-stack-demo-options-title"
-  }, "direction"), /*#__PURE__*/React.createElement(Radio, {
-    value: "row"
-  }, " row"), /*#__PURE__*/React.createElement(Radio, {
-    value: "row-reverse"
-  }, " row-reverse"), /*#__PURE__*/React.createElement(Radio, {
-    value: "column"
-  }, "column"), /*#__PURE__*/React.createElement(Radio, {
-    value: "column-reverse"
-  }, "column-reverse")), /*#__PURE__*/React.createElement(RadioGroup, {
-    value: stackState.justifyContent,
-    onChange: function onChange(e, data) {
-      setStackState(_objectSpread(_objectSpread({}, stackState), {}, {
-        justifyContent: data.value
-      }));
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "bui-stack-demo-options-title"
-  }, " justifyContent"), /*#__PURE__*/React.createElement(Radio, {
-    value: "flex-start"
-  }, " flex-start"), /*#__PURE__*/React.createElement(Radio, {
-    value: "flex-end"
-  }, " flex-end"), /*#__PURE__*/React.createElement(Radio, {
-    value: "center"
-  }, "center"), /*#__PURE__*/React.createElement(Radio, {
-    value: "space-between"
-  }, "space-between"), /*#__PURE__*/React.createElement(Radio, {
-    value: "space-around"
-  }, "space-around"), /*#__PURE__*/React.createElement(Radio, {
-    value: "space-evenly"
-  }, "space-evenly")), /*#__PURE__*/React.createElement(RadioGroup, {
-    value: stackState.alignItems,
-    onChange: function onChange(e, data) {
-      setStackState(_objectSpread(_objectSpread({}, stackState), {}, {
-        alignItems: data.value
-      }));
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "bui-stack-demo-options-title"
-  }, " alignItems"), /*#__PURE__*/React.createElement(Radio, {
-    value: "flex-start"
-  }, " flex-start"), /*#__PURE__*/React.createElement(Radio, {
-    value: "flex-end"
-  }, " flex-end"), /*#__PURE__*/React.createElement(Radio, {
-    value: "center"
-  }, "center"), /*#__PURE__*/React.createElement(Radio, {
-    value: "stretch"
-  }, "stretch"), /*#__PURE__*/React.createElement(Radio, {
-    value: "baseline"
-  }, " baseline")), /*#__PURE__*/React.createElement(RadioGroup, {
-    value: stackState.flexWrap,
-    onChange: function onChange(e, data) {
-      setStackState(_objectSpread(_objectSpread({}, stackState), {}, {
-        flexWrap: data.value
-      }));
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "bui-stack-demo-options-title"
-  }, " flexWrap"), /*#__PURE__*/React.createElement(Radio, {
-    value: "wrap"
-  }, " wrap"), /*#__PURE__*/React.createElement(Radio, {
-    value: "no-wrap"
-  }, " no-wrap"), /*#__PURE__*/React.createElement(Radio, {
-    value: "wrap-reverse"
-  }, "wrap-reverse")), /*#__PURE__*/React.createElement(RadioGroup, {
-    value: stackState.spacing,
-    onChange: function onChange(e, data) {
-      setStackState(_objectSpread(_objectSpread({}, stackState), {}, {
-        spacing: data.value
-      }));
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "bui-stack-demo-options-title"
-  }, " spacing"), /*#__PURE__*/React.createElement(Radio, {
-    value: "10px"
-  }, "10px"), /*#__PURE__*/React.createElement(Radio, {
-    value: "20px"
-  }, " 20px"), /*#__PURE__*/React.createElement(Radio, {
-    value: "30px"
-  }, "30px"), /*#__PURE__*/React.createElement(Radio, {
-    value: "40px"
-  }, "40px"), /*#__PURE__*/React.createElement(Radio, {
-    value: "50px"
-  }, " 50px"))));
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React, { useState } from "react";
+import { Button, Radio, RadioGroup, Stack } from "@bifrostui/react";
+import "./index.css";
+const StackDemo = () => {
+  const [stackState, setStackState] = useState({
+    direction: "",
+    alignItems: "",
+    justifyContent: "",
+    spacing: "",
+    wrap: ""
+  });
+  return /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(
+    Stack,
+    __spreadValues({
+      style: {
+        width: "150px",
+        height: "150px"
+      }
+    }, stackState),
+    /* @__PURE__ */ React.createElement(Button, null, "\u6309\u94AE1"),
+    /* @__PURE__ */ React.createElement(Button, null, "\u6309\u94AE2"),
+    /* @__PURE__ */ React.createElement(Button, null, "\u6309\u94AE3")
+  ), /* @__PURE__ */ React.createElement("div", { className: "bui-stack-demo-options" }, /* @__PURE__ */ React.createElement(
+    RadioGroup,
+    {
+      value: stackState.direction,
+      onChange: (e, data) => {
+        setStackState(__spreadProps(__spreadValues({}, stackState), {
+          direction: data.value
+        }));
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "bui-stack-demo-options-title" }, "direction"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "row" }, " row"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "row-reverse" }, " row-reverse"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "column" }, "column"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "column-reverse" }, "column-reverse")
+  ), /* @__PURE__ */ React.createElement(
+    RadioGroup,
+    {
+      value: stackState.justifyContent,
+      onChange: (e, data) => {
+        setStackState(__spreadProps(__spreadValues({}, stackState), {
+          justifyContent: data.value
+        }));
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "bui-stack-demo-options-title" }, " justifyContent"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "flex-start" }, " flex-start"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "flex-end" }, " flex-end"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "center" }, "center"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "space-between" }, "space-between"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "space-around" }, "space-around"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "space-evenly" }, "space-evenly")
+  ), /* @__PURE__ */ React.createElement(
+    RadioGroup,
+    {
+      value: stackState.alignItems,
+      onChange: (e, data) => {
+        setStackState(__spreadProps(__spreadValues({}, stackState), {
+          alignItems: data.value
+        }));
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "bui-stack-demo-options-title" }, " alignItems"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "flex-start" }, " flex-start"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "flex-end" }, " flex-end"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "center" }, "center"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "stretch" }, "stretch"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "baseline" }, " baseline")
+  ), /* @__PURE__ */ React.createElement(
+    RadioGroup,
+    {
+      value: stackState.flexWrap,
+      onChange: (e, data) => {
+        setStackState(__spreadProps(__spreadValues({}, stackState), {
+          flexWrap: data.value
+        }));
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "bui-stack-demo-options-title" }, " flexWrap"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "wrap" }, " wrap"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "no-wrap" }, " no-wrap"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "wrap-reverse" }, "wrap-reverse")
+  ), /* @__PURE__ */ React.createElement(
+    RadioGroup,
+    {
+      value: stackState.spacing,
+      onChange: (e, data) => {
+        setStackState(__spreadProps(__spreadValues({}, stackState), {
+          spacing: data.value
+        }));
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "bui-stack-demo-options-title" }, " spacing"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "10px" }, "10px"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "20px" }, " 20px"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "30px" }, "30px"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "40px" }, "40px"),
+    /* @__PURE__ */ React.createElement(Radio, { value: "50px" }, " 50px")
+  )));
+};
+var StackDemo_default = StackDemo;
+export {
+  StackDemo_default as default
 };
-export default StackDemo;

package/es/Stack/index.js

@@ -1,3 +1,7 @@
-export { default } from "./Stack";
-export { default as Stack } from "./Stack";
-export * from "./Stack.types";
+import { default as default2 } from "./Stack";
+import { default as default3 } from "./Stack";
+export * from "./Stack.types";
+export {
+  default3 as Stack,
+  default2 as default
+};

package/es/Steps/Step.css

@@ -21,7 +21,7 @@
 }
 .bui-step-line::after {
   display: inline-block;
-  content: '';
+  content: "";
   width: 1px;
   border-left-width: 1px;
   border-left-style: dotted;
@@ -141,7 +141,7 @@
   position: absolute;
   width: 9999px;
   height: 1px;
-  content: '';
+  content: "";
   left: 100%;
   top: 0;
   bottom: 0;

package/es/Steps/Step.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import './Step.less';
 import { StepProps } from './Step.types';
-declare const Step: React.ForwardRefExoticComponent<Omit<StepProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Step: React.ForwardRefExoticComponent<Omit<StepProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Step;