@festo-ui/react 4.0.3-pre-20221213.1 → 5.0.0-dev.46

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

@@ -0,0 +1,75 @@
+import { useRef } from 'react';
+import useSearchInput from './useSearchInput';
+import useOnClickOutside from '../../helper/useOnClickOutside';
+import ClearButton from './ClearButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function SearchInput(_ref) {
+  let {
+    defaultValue,
+    disabled,
+    label,
+    value,
+    suggestions,
+    onChange,
+    onSearch,
+    onKeyboardNavigate
+  } = _ref;
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const cappedSuggestions = suggestions?.slice(0, 10) ?? [];
+  const {
+    handleFocus,
+    handleInput,
+    handleClearQuery,
+    handleSuggestionClick,
+    handleOutsideClick,
+    handleKeyDown,
+    hideSuggestionList,
+    selectedSuggestionIndex,
+    innerValue
+  } = useSearchInput(inputRef, cappedSuggestions, value, defaultValue, onChange, onSearch, onKeyboardNavigate);
+  useOnClickOutside(containerRef, handleOutsideClick);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fwe-search-input fwe-w-100",
+    ref: containerRef,
+    children: [/*#__PURE__*/_jsx("input", {
+      ref: inputRef,
+      className: "fwe-w-100",
+      disabled: disabled,
+      placeholder: label,
+      onFocus: handleFocus,
+      type: "search",
+      onInput: handleInput,
+      onKeyDown: handleKeyDown,
+      value: innerValue
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-search-icon"
+    }), /*#__PURE__*/_jsx(ClearButton, {
+      onClick: handleClearQuery
+    }), Boolean(suggestions?.length) && !hideSuggestionList && /*#__PURE__*/_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
+      _jsx("div", {
+        role: "option",
+        tabIndex: -1,
+        "aria-selected": selectedSuggestionIndex === i,
+        onClick: () => handleSuggestionClick(suggestion),
+        className: `fwe-search-suggestion ${selectedSuggestionIndex === i ? 'fwe-selected' : ''}`,
+        children: /*#__PURE__*/_jsx("div", {
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: suggestion.template
+          }
+        })
+      }, suggestion.value)), suggestions && suggestions.length > 10 && /*#__PURE__*/_jsx("div", {
+        className: "fwe-ml-xxs",
+        children: "..."
+      })]
+    })]
+  });
+}
+export default SearchInput;

package/lib/components/search-input/SearchSuggestion.d.ts

@@ -0,0 +1,17 @@
+export default class SearchSuggestion {
+    /**
+     * a html-string. e.g.: '<b> hello </b>'
+     */
+    template: string;
+    /**
+     * This Value will be used as new query when the user selects the suggestion.
+     */
+    value: string;
+    /**
+     * 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: string, query: string): SearchSuggestion;
+}

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

@@ -0,0 +1,32 @@
+export default 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}<b>${part2}</b>${part3}`;
+    }
+    return {
+      value: suggestionString,
+      template
+    };
+  }
+}

package/lib/components/search-input/useSearchInput.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import SearchSuggestion from './SearchSuggestion';
+export default function useSearchInput(inputRef: React.MutableRefObject<HTMLInputElement | null>, cappedSuggestions: SearchSuggestion[], value?: string, defaultValue?: string, onChange?: (value: string) => void, onSearch?: (value: string) => void, onKeyboardNavigate?: (value: string) => void): {
+    innerValue: string | undefined;
+    hideSuggestionList: boolean;
+    selectedSuggestionIndex: number;
+    handleClearQuery: () => void;
+    handleFocus: () => void;
+    handleInput: (event: any) => void;
+    handleSuggestionClick: (suggestion: SearchSuggestion) => void;
+    handleOutsideClick: () => void;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+};

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

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import useControlled from '../../helper/useControlled';
+export default 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] = useControlled({
+    controlled: value,
+    default: defaultValue
+  });
+  const [hideSuggestionList, setHideSuggestionList] = useState(false);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = 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/lib/components/snackbar/Snackbar.d.ts

@@ -1,23 +1,23 @@
-/// <reference types="react" />
-import { ClassNameProps } from '../../helper/types';
-import './Snackbar.scss';
-export interface SnackbarConfig extends ClassNameProps {
-    type?: 'info' | 'warning' | 'error';
-    variant?: 'a' | 'b' | 'c';
-    darkBackground?: boolean;
-    showClose?: boolean;
-    action?: string;
-    disappearAfter?: number | null;
-    key?: string | number;
-}
-export interface SnackbarData extends SnackbarConfig {
-    text: string;
-}
-export interface SnackbarProps {
-    data?: SnackbarData;
-    onAction?: () => void;
-    onClose?: () => void;
-    first?: boolean;
-}
-declare function Snackbar(props: SnackbarProps): JSX.Element;
-export default Snackbar;
+/// <reference types="react" />
+import { ClassNameProps } from '../../helper/types';
+import './Snackbar.scss';
+export interface SnackbarConfig extends ClassNameProps {
+    type?: 'info' | 'warning' | 'error';
+    variant?: 'a' | 'b' | 'c';
+    darkBackground?: boolean;
+    showClose?: boolean;
+    action?: string;
+    disappearAfter?: number | null;
+    key?: string | number;
+}
+export interface SnackbarData extends SnackbarConfig {
+    text: string;
+}
+export interface SnackbarProps {
+    data?: SnackbarData;
+    onAction?: () => void;
+    onClose?: () => void;
+    first?: boolean;
+}
+declare function Snackbar(props: SnackbarProps): JSX.Element;
+export default Snackbar;

package/lib/components/snackbar/Snackbar.js

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { CSSTransition } from 'react-transition-group';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Snackbar(props) {
+  const {
+    data,
+    onAction,
+    onClose,
+    first = false
+  } = props;
+  const [show, setShow] = useState(true);
+  const nodeRef = useRef(null);
+  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__*/_jsx(CSSTransition, {
+    nodeRef: nodeRef,
+    onExited: () => onClose ? onClose() : undefined,
+    unmountOnExit: true,
+    timeout: {
+      exit: 600
+    },
+    in: show,
+    classNames: classes,
+    appear: true,
+    children: /*#__PURE__*/_jsx("div", {
+      ref: nodeRef,
+      className: classes,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classNames({
+          'fwe-snackbar': true,
+          'fwe-snackbar-b': data?.variant === 'b',
+          'fwe-snackbar-c': data?.variant === 'c',
+          'fwe-snackbar-warning': data?.type === 'warning',
+          'fwe-snackbar-error': data?.type === 'error',
+          'fwe-snackbar-shadow': data?.darkBackground
+        }, data?.className),
+        children: [data?.type && /*#__PURE__*/_jsx("i", {
+          "aria-hidden": true,
+          className: classNames({
+            'fwe-icon': true,
+            'fwe-icon-status-info': data?.type === 'info',
+            'fwe-icon-status-warning': data?.type === 'warning',
+            'fwe-icon-status-failure': data?.type === 'error'
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          children: data?.text
+        }), data?.action && /*#__PURE__*/_jsx("button", {
+          "aria-label": "UserAction",
+          type: "button",
+          className: "fwe-btn fwe-btn-link",
+          onClick: () => onAction ? onAction() : undefined,
+          children: data?.action
+        }), data?.showClose && /*#__PURE__*/_jsxs("button", {
+          "aria-label": "Close",
+          type: "button",
+          className: "fwe-btn fwe-btn-link",
+          onClick: handleClose,
+          children: [/*#__PURE__*/_jsx("i", {
+            "aria-hidden": true,
+            className: "fwe-icon fwe-icon-close-small"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "fwe-sr-only",
+            children: "Close"
+          })]
+        })]
+      })
+    })
+  });
+}
+export default Snackbar;

package/lib/components/snackbar/SnackbarContext.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { SnackbarData } from './Snackbar';
-export interface ProviderContext {
-    addSnackbar: (data: SnackbarData, onAction?: () => void, onClose?: () => void) => void;
-    closeSnackbar: (key?: number | string) => void;
-}
-declare const _default: React.Context<ProviderContext>;
-export default _default;
+import React from 'react';
+import { SnackbarData } from './Snackbar';
+export interface ProviderContext {
+    addSnackbar: (data: SnackbarData, onAction?: () => void, onClose?: () => void) => void;
+    closeSnackbar: (key: number | string) => void;
+}
+declare const _default: React.Context<ProviderContext>;
+export default _default;

package/lib/components/snackbar/SnackbarContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export default /*#__PURE__*/React.createContext(null);

package/lib/components/snackbar/SnackbarProvider.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { ClassNamePropsWithChildren } from '../../helper/types';
-import { SnackbarConfig } from './Snackbar';
-interface SnackbarProviderProps extends ClassNamePropsWithChildren {
-    config?: SnackbarConfig;
-}
-declare function SnackbarProvider(props: SnackbarProviderProps): JSX.Element;
-export default SnackbarProvider;
+/// <reference types="react" />
+import { ClassNamePropsWithChildren } from '../../helper/types';
+import { SnackbarConfig } from './Snackbar';
+interface SnackbarProviderProps extends ClassNamePropsWithChildren {
+    config?: SnackbarConfig;
+}
+declare function SnackbarProvider(props: SnackbarProviderProps): JSX.Element;
+export default SnackbarProvider;

package/lib/components/snackbar/SnackbarProvider.js

@@ -0,0 +1,58 @@
+import { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import Snackbar from './Snackbar';
+import SnackbarContext from './SnackbarContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function SnackbarProvider(props) {
+  const {
+    config = {
+      darkBackground: true
+    },
+    children,
+    className
+  } = props;
+  const [snacks, setSnacks] = useState([]);
+  function addSnackbar(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;
+  }
+  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 = useMemo(() => ({
+    addSnackbar,
+    closeSnackbar
+  }), []);
+  return /*#__PURE__*/_jsxs(SnackbarContext.Provider, {
+    value: contextValue,
+    children: [children, /*#__PURE__*/_jsx("div", {
+      className: classNames('fwe-snackbar-container', className),
+      children: snacks.map(snack => /*#__PURE__*/_jsx(Snackbar, {
+        data: snack.data,
+        onAction: () => snack.onAction ? snack.onAction() : undefined,
+        onClose: () => handleClose(snack),
+        first: snack.first
+      }, snack.key))
+    })]
+  });
+}
+export default SnackbarProvider;

package/lib/components/snackbar/useSnackbar.d.ts

@@ -1,3 +1,3 @@
-import { ProviderContext } from './SnackbarContext';
-declare const _default: () => ProviderContext;
-export default _default;
+import { ProviderContext } from './SnackbarContext';
+declare const _default: () => ProviderContext;
+export default _default;

package/lib/components/snackbar/useSnackbar.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import SnackbarContext from './SnackbarContext';
+export default (() => useContext(SnackbarContext));

package/lib/components/stepper-horizontal/StepperHorizontal.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-interface StepperHorizontalProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
-    stepIndex?: number;
-    onChange?: (stepIndex: number) => void;
-}
-declare const StepperHorizontal: React.ForwardRefExoticComponent<StepperHorizontalProps & React.RefAttributes<HTMLDivElement>>;
-export default StepperHorizontal;
+import React, { ComponentPropsWithoutRef } from 'react';
+interface StepperHorizontalProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    stepIndex?: number;
+    onChange?: (stepIndex: number) => void;
+}
+declare const StepperHorizontal: React.ForwardRefExoticComponent<StepperHorizontalProps & React.RefAttributes<HTMLDivElement>>;
+export default StepperHorizontal;

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

@@ -0,0 +1,62 @@
+import cn from 'classnames';
+import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const StepperHorizontal = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    stepIndex = 0,
+    onChange,
+    ...props
+  } = _ref;
+  const stepComponents = React.Children.map(children, (child, i) => /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.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__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "fwe-stepper-horizontal",
+      children: stepComponents && stepComponents.map((step, i) => /*#__PURE__*/_jsx("div", {
+        tabIndex: 0,
+        role: "button",
+        ref: ref,
+        onKeyDown: handleKeyDown(i),
+        onKeyUp: handleKeyUp(i),
+        className: cn('fwe-step-container', {
+          'fwe-step-done': stepIndex > i,
+          'fwe-step-active': i === stepIndex
+        }),
+        onClick: () => handleStepClick(i),
+        ...props,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: "fwe-step",
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "fwe-step-no",
+            children: i + 1
+          }), /*#__PURE__*/_jsx("div", {
+            className: "fwe-step-name",
+            children: step.props.title
+          })]
+        })
+      }, step.props.title))
+    }), stepComponents]
+  });
+});
+export default StepperHorizontal;

package/lib/components/stepper-horizontal/step-horizontal/StepHorizontal.d.ts

@@ -1,7 +1,7 @@
-import './StepHorizontal.scss';
-import { ComponentPropsWithoutRef } from 'react';
-interface StepHorizontalProps extends ComponentPropsWithoutRef<'div'> {
-    isActive?: boolean;
-}
-declare const StepHorizontal: import("react").ForwardRefExoticComponent<StepHorizontalProps & import("react").RefAttributes<HTMLDivElement>>;
-export default StepHorizontal;
+import './StepHorizontal.scss';
+import { ComponentPropsWithoutRef } from 'react';
+export interface StepHorizontalProps extends ComponentPropsWithoutRef<'div'> {
+    isActive?: boolean;
+}
+declare const StepHorizontal: import("react").ForwardRefExoticComponent<StepHorizontalProps & import("react").RefAttributes<HTMLDivElement>>;
+export default StepHorizontal;

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

@@ -0,0 +1,23 @@
+import cn from 'classnames';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StepHorizontal = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    isActive,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: cn('overflow-hidden', {
+      hidden: !isActive
+    }),
+    ...props,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "fr-moving-container",
+      children: children
+    })
+  });
+});
+export default StepHorizontal;

package/lib/components/stepper-vertical/StepperVertical.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-interface StepperVerticalProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
-    stepIndex?: number;
-    onChange?: (stepIndex: number) => void;
-}
-declare const StepperVertical: React.ForwardRefExoticComponent<StepperVerticalProps & React.RefAttributes<HTMLDivElement>>;
-export default StepperVertical;
+import React, { ComponentPropsWithoutRef } from 'react';
+interface StepperVerticalProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    stepIndex?: number;
+    onChange?: (stepIndex: number) => void;
+}
+declare const StepperVertical: React.ForwardRefExoticComponent<StepperVerticalProps & React.RefAttributes<HTMLDivElement>>;
+export default StepperVertical;

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

@@ -0,0 +1,37 @@
+import cn from 'classnames';
+import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StepperVertical = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    stepIndex = 0,
+    onChange,
+    ...props
+  } = _ref;
+  function handleStepClick(index) {
+    if (stepIndex > index && onChange) {
+      onChange(index);
+    }
+  }
+  const stepComponents = React.Children.map(children, (child, i) => {
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        ...child.props,
+        isActive: i === stepIndex,
+        index: i,
+        isDone: i < stepIndex,
+        isLastElement: i === React.Children.count(children) - 1,
+        onStepClick: () => handleStepClick(i)
+      });
+    }
+    return null;
+  });
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: cn('fwe-stepper-vertical', className),
+    ...props,
+    children: stepComponents
+  });
+});
+export default StepperVertical;