@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/node/lib/components/search-input/SearchInput.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useSearchInput = _interopRequireDefault(require("./useSearchInput.js"));
+var _useOnClickOutside = _interopRequireDefault(require("../../helper/useOnClickOutside.js"));
+var _ClearButton = _interopRequireDefault(require("./ClearButton.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function SearchInput(_ref) {
+  let {
+    defaultValue,
+    disabled,
+    label,
+    value,
+    suggestions,
+    onChange,
+    onSearch,
+    onKeyboardNavigate,
+    className
+  } = _ref;
+  const inputRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
+  const cappedSuggestions = suggestions?.slice(0, 10) ?? [];
+  const {
+    handleFocus,
+    handleInput,
+    handleClearQuery,
+    handleSuggestionClick,
+    handleOutsideClick,
+    handleKeyDown,
+    hideSuggestionList,
+    selectedSuggestionIndex,
+    innerValue
+  } = (0, _useSearchInput.default)(inputRef, cappedSuggestions, value, defaultValue, onChange, onSearch, onKeyboardNavigate);
+  (0, _useOnClickOutside.default)(containerRef, handleOutsideClick);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)("fwe-search-input", className),
+    ref: containerRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      ref: inputRef,
+      disabled: disabled,
+      placeholder: label,
+      onFocus: handleFocus,
+      type: "search",
+      "aria-label": "Search",
+      onInput: handleInput,
+      onKeyDown: handleKeyDown,
+      value: innerValue
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-search-icon"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClearButton.default, {
+      onClick: handleClearQuery
+    }), Boolean(suggestions?.length) && !hideSuggestionList && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-search-suggestions",
+      children: [cappedSuggestions.map((suggestion, i) =>
+      /*#__PURE__*/
+      // key event is handled via parent
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+      (0, _jsxRuntime.jsx)("div", {
+        role: "option",
+        tabIndex: -1,
+        "aria-label": suggestion.value,
+        "aria-selected": selectedSuggestionIndex === i,
+        onClick: () => handleSuggestionClick(suggestion),
+        className: `fwe-search-suggestion ${selectedSuggestionIndex === i ? "fwe-selected" : ""}`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: suggestion.template
+          }
+        })
+      }, suggestion.value)), suggestions && suggestions.length > 10 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-ml-xxs",
+        children: "..."
+      })]
+    })]
+  });
+}
+var _default = exports.default = SearchInput;

package/node/lib/components/search-input/SearchSuggestion.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+class SearchSuggestion {
+  /**
+   * a html-string. e.g.: '<b> hello </b>'
+   */
+
+  /**
+   * This Value will be used as new query when the user selects the suggestion.
+   */
+
+  /**
+   * Creates a basic Suggestion from a string. The first query match is highlighted by bold tags.
+   * @param suggestionString The suggested string (should contain the whole query)
+   * @param query The current query. This string will be highlighted.
+   * @returns a html-string.
+   */
+  static basicSuggestion(suggestionString, query) {
+    const i = suggestionString.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
+    let template = suggestionString;
+    if (i !== -1) {
+      const boldStart = i;
+      const boldEnd = i + query.length;
+      const part1 = suggestionString.substring(0, boldStart);
+      const part2 = suggestionString.substring(boldStart, boldEnd);
+      const part3 = suggestionString.substring(boldEnd, suggestionString.length);
+      template = `${part1}<strong>${part2}</strong>${part3}`;
+    }
+    return {
+      value: suggestionString,
+      template
+    };
+  }
+}
+exports.default = SearchSuggestion;

package/node/lib/components/search-input/useSearchInput.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSearchInput;
+var _react = require("react");
+var _useControlled = _interopRequireDefault(require("../../helper/useControlled.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function useSearchInput(inputRef, cappedSuggestions, value) {
+  let defaultValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
+  let onChange = arguments.length > 4 ? arguments[4] : undefined;
+  let onSearch = arguments.length > 5 ? arguments[5] : undefined;
+  let onKeyboardNavigate = arguments.length > 6 ? arguments[6] : undefined;
+  const [innerValue, setValue] = (0, _useControlled.default)({
+    controlled: value,
+    default: defaultValue
+  });
+  const [hideSuggestionList, setHideSuggestionList] = (0, _react.useState)(false);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0, _react.useState)(-1);
+  function blurInput() {
+    if (inputRef.current) {
+      inputRef.current.blur();
+    }
+  }
+  function reset() {
+    setSelectedSuggestionIndex(-1);
+    setHideSuggestionList(true);
+    blurInput();
+  }
+  function handleSearch() {
+    reset();
+    if (innerValue !== undefined) {
+      onSearch?.(innerValue);
+    }
+  }
+  function updateValue(newValue) {
+    setValue(newValue);
+    onChange?.(newValue);
+    onSearch?.(newValue);
+  }
+  function handleClearQuery() {
+    reset();
+    updateValue("");
+  }
+  function handleArrowKey(newSuggestionIndex) {
+    if (!cappedSuggestions || !cappedSuggestions.length) {
+      return;
+    }
+    const selectedSuggestion = cappedSuggestions[newSuggestionIndex];
+    setSelectedSuggestionIndex(newSuggestionIndex);
+    setValue(selectedSuggestion.value);
+    onKeyboardNavigate?.(selectedSuggestion.value);
+  }
+  function handleUpArrowKey() {
+    handleArrowKey(selectedSuggestionIndex > 0 ? selectedSuggestionIndex - 1 : cappedSuggestions.length - 1);
+  }
+  function handleDownArrowKey() {
+    handleArrowKey(selectedSuggestionIndex >= cappedSuggestions.length - 1 ? 0 : selectedSuggestionIndex + 1);
+  }
+  function handleKeyDown(event) {
+    switch (event.key) {
+      case "Enter":
+        handleSearch();
+        break;
+      case "Escape":
+        handleClearQuery();
+        break;
+      case "ArrowUp":
+        handleUpArrowKey();
+        break;
+      case "ArrowDown":
+        handleDownArrowKey();
+        break;
+      default:
+        break;
+    }
+  }
+  const handleFocus = () => setHideSuggestionList(false);
+  const handleOutsideClick = () => setHideSuggestionList(true);
+  function handleSuggestionClick(suggestion) {
+    reset();
+    updateValue(suggestion.value);
+  }
+  function handleInput(event) {
+    setSelectedSuggestionIndex(-1);
+    setValue(event.target.value);
+    onChange?.(event.target.value);
+  }
+  return {
+    innerValue,
+    hideSuggestionList,
+    selectedSuggestionIndex,
+    handleClearQuery,
+    handleFocus,
+    handleInput,
+    handleSuggestionClick,
+    handleOutsideClick,
+    handleKeyDown
+  };
+}

package/node/lib/components/snackbar/Snackbar.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactTransitionGroup = require("react-transition-group");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Snackbar(props) {
+  const {
+    data,
+    onAction,
+    onClose,
+    first = false
+  } = props;
+  const [show, setShow] = (0, _react.useState)(true);
+  const nodeRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    let disappearAfter = 5000;
+    if (data?.disappearAfter !== null) {
+      if (data?.disappearAfter && data?.disappearAfter > 0) {
+        disappearAfter = data?.disappearAfter;
+      }
+      const timer = setTimeout(() => setShow(false), disappearAfter);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+    return undefined;
+  }, [data]);
+  function handleClose() {
+    setShow(false);
+  }
+  const classes = first ? "fr-snackbar-wrapper--first" : "fr-snackbar-wrapper";
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+    nodeRef: nodeRef,
+    onExited: () => onClose ? onClose() : undefined,
+    unmountOnExit: true,
+    timeout: {
+      exit: 600
+    },
+    in: show,
+    classNames: classes,
+    appear: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: nodeRef,
+      className: classes,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)({
+          "fwe-snackbar": true,
+          "fwe-snackbar-b": data?.variant === "b",
+          "fwe-snackbar-c": data?.variant === "c",
+          "fwe-snackbar-info": data?.type === "info",
+          "fwe-snackbar-warning": data?.type === "warning",
+          "fwe-snackbar-error": data?.type === "error",
+          "fwe-snackbar-shadow": data?.darkBackground
+        }, data?.className),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: data?.text
+        }), data?.action && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": "UserAction",
+          type: "button",
+          className: "fwe-snackbar-link-btn",
+          onClick: () => onAction ? onAction() : undefined,
+          children: data?.action
+        }), data?.action && data?.showClose && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fwe-snackbar-separator"
+        }), data?.showClose && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          "aria-label": "Close",
+          type: "button",
+          className: "fwe-snackbar-close-btn",
+          onClick: handleClose,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "fwe-sr-only",
+            children: "Close"
+          })
+        })]
+      })
+    })
+  });
+}
+var _default = exports.default = Snackbar;

package/node/lib/components/snackbar/SnackbarContext.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = /*#__PURE__*/_react.default.createContext(null);

package/node/lib/components/snackbar/SnackbarProvider.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.addSnackbar = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Snackbar = _interopRequireDefault(require("./Snackbar.js"));
+var _SnackbarContext = _interopRequireDefault(require("./SnackbarContext.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+let addSnackbarFunction;
+function SnackbarProvider(props) {
+  const {
+    config = {
+      darkBackground: true
+    },
+    children,
+    className
+  } = props;
+  const [snacks, setSnacks] = (0, _react.useState)([]);
+  const addSnackbar = (0, _react.useCallback)((snackData, onAction, onClose) => {
+    const key = snackData.key ?? new Date().getTime() + Math.random();
+    setSnacks(prevSnacks => [{
+      data: {
+        ...config,
+        ...snackData
+      },
+      onAction,
+      onClose,
+      key,
+      first: prevSnacks.length === 0
+    }, ...prevSnacks]);
+    return key;
+  }, [config]);
+  addSnackbarFunction = addSnackbar;
+  function closeSnackbar(key) {
+    if (key !== undefined) {
+      setSnacks(prevSnacks => prevSnacks.filter(snack => snack.key !== key));
+    }
+  }
+  function handleClose(snack) {
+    closeSnackbar(snack.key);
+    if (snack.onClose) {
+      snack.onClose();
+    }
+  }
+  const contextValue = (0, _react.useMemo)(() => ({
+    addSnackbar,
+    closeSnackbar
+  }), [addSnackbar]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SnackbarContext.default.Provider, {
+    value: contextValue,
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)("fwe-snackbar-container", className),
+      children: snacks.map(snack => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Snackbar.default, {
+        data: snack.data,
+        onAction: () => snack.onAction ? snack.onAction() : undefined,
+        onClose: () => handleClose(snack),
+        first: snack.first
+      }, snack.key))
+    })]
+  });
+}
+var _default = exports.default = SnackbarProvider;
+const addSnackbar = (snackData, onAction, onClose) => {
+  if (!addSnackbarFunction) {
+    throw new Error("SnackbarProvider is not mounted.");
+  }
+  return addSnackbarFunction(snackData, onAction, onClose);
+};
+exports.addSnackbar = addSnackbar;

package/node/lib/components/snackbar/useSnackbar.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _SnackbarContext = _interopRequireDefault(require("./SnackbarContext.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = () => (0, _react.useContext)(_SnackbarContext.default);
+exports.default = _default;

package/node/lib/components/stepper-horizontal/StepperHorizontal.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StepperHorizontal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    stepIndex = 0,
+    onChange,
+    ...props
+  } = _ref;
+  const stepComponents = _react.default.Children.map(children, (child, i) => /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, {
+    ...child.props,
+    isActive: i === stepIndex
+  }) : null);
+  function handleStepClick(index) {
+    if (stepIndex > index && onChange) {
+      onChange(index);
+    }
+  }
+  const handleKeyDown = i => event => {
+    if (event.key === "Enter") {
+      handleStepClick(i);
+    }
+  };
+  const handleKeyUp = i => event => {
+    if (event.key === " ") {
+      handleStepClick(i);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-stepper-horizontal",
+      children: stepComponents && stepComponents.map((step, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        tabIndex: 0,
+        role: "button",
+        ref: ref,
+        onKeyDown: handleKeyDown(i),
+        onKeyUp: handleKeyUp(i),
+        className: (0, _classnames.default)("fwe-step-container", {
+          "fwe-step-done": stepIndex > i,
+          "fwe-step-active": i === stepIndex
+        }),
+        onClick: () => handleStepClick(i),
+        ...props,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fwe-step",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fwe-step-no",
+            children: i + 1
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fwe-step-name",
+            children: step.props.title
+          })]
+        })
+      }, step.props.title))
+    }), stepComponents]
+  });
+});
+var _default = exports.default = StepperHorizontal;

package/node/lib/components/stepper-horizontal/step-horizontal/StepHorizontal.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StepHorizontal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    isActive,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: (0, _classnames.default)("overflow-hidden", {
+      hidden: !isActive
+    }),
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fr-moving-container",
+      children: children
+    })
+  });
+});
+var _default = exports.default = StepHorizontal;

package/node/lib/components/stepper-vertical/StepperVertical.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StepperVertical = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    stepIndex = 0,
+    onChange,
+    ...props
+  } = _ref;
+  function handleStepClick(index) {
+    if (stepIndex > index && onChange) {
+      onChange(index);
+    }
+  }
+  const stepComponents = _react.default.Children.map(children, (child, i) => {
+    if (/*#__PURE__*/_react.default.isValidElement(child)) {
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        ...child.props,
+        isActive: i === stepIndex,
+        index: i,
+        isDone: i < stepIndex,
+        isLastElement: i === _react.default.Children.count(children) - 1,
+        onStepClick: () => handleStepClick(i)
+      });
+    }
+    return null;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: (0, _classnames.default)("fwe-stepper-vertical", className),
+    ...props,
+    children: stepComponents
+  });
+});
+var _default = exports.default = StepperVertical;

package/node/lib/components/stepper-vertical/step-vertical/StepVertical.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StepVertical = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    isActive,
+    isLastElement,
+    isDone,
+    index,
+    title,
+    onStepClick,
+    ...props
+  } = _ref;
+  const containerRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (containerRef.current) {
+      if (isActive) {
+        const itemHeight = contentRef.current?.offsetHeight;
+        containerRef.current.style.height = `${itemHeight}px`;
+      } else {
+        containerRef.current.style.height = "20px";
+      }
+    }
+  }, [isActive]);
+  function handleClick() {
+    if (onStepClick) {
+      onStepClick();
+    }
+  }
+  const handleKeyDown = event => {
+    if (event.key === "Enter") {
+      handleClick();
+    }
+  };
+  const handleKeyUp = event => {
+    if (event.key === " ") {
+      handleClick();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    className: (0, _classnames.default)("fwe-step-container", {
+      "fwe-last-element": isLastElement,
+      "fwe-step-active": isActive,
+      "fwe-step-done": isDone
+    }),
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      tabIndex: 0,
+      role: "button",
+      className: "fwe-step",
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      children: [index !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-step-no",
+        children: index + 1
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fwe-step-name",
+        children: title
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: containerRef,
+      className: "fwe-step-content-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: contentRef,
+        className: "fwe-step-content",
+        children: children
+      })
+    })]
+  });
+});
+var _default = exports.default = StepVertical;