@plesk/ui-library 3.36.1 → 3.37.0

package/cjs/components/Carousel/Carousel.js

@@ -23,14 +23,14 @@ const calcWidths = node => {
     totalWidth
   };
 };
-/**
- * Carousel component is used for optimizing page space by displaying only some parts
- * of entire content in a cyclic view.
- * @since 0.0.42
+/**
+ * Carousel component is used for optimizing page space by displaying only some parts
+ * of entire content in a cyclic view.
+ * @since 0.0.42
  */
 class Carousel extends _react.Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super(...arguments);
     (0, _defineProperty2.default)(this, "state", {
       showControls: false,
       current: 0,
@@ -40,21 +40,145 @@ class Carousel extends _react.Component {
       totalWidth: 0
     });
     (0, _defineProperty2.default)(this, "speed", 500);
-    (0, _defineProperty2.default)(this, "playSpeed", 5000);
     (0, _defineProperty2.default)(this, "isRtl", void 0);
     (0, _defineProperty2.default)(this, "playTimer", null);
     (0, _defineProperty2.default)(this, "movingCallback", null);
     (0, _defineProperty2.default)(this, "rootRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)(this, "genuineRef", /*#__PURE__*/(0, _react.createRef)());
-    this.handlePrevClick = this.handlePrevClick.bind(this);
-    this.handleNextClick = this.handleNextClick.bind(this);
-    this.stop = this.stop.bind(this);
-    this.play = this.play.bind(this);
-    this.handleResize = this.handleResize.bind(this);
+    (0, _defineProperty2.default)(this, "handlePrevClick", () => {
+      this.stop();
+      this.setCurrentSlide(this.state.current - 1);
+    });
+    (0, _defineProperty2.default)(this, "handleNextClick", () => {
+      this.stop();
+      this.setCurrentSlide(this.state.current + 1);
+    });
+    (0, _defineProperty2.default)(this, "play", () => {
+      this.playTimer = setTimeout(() => {
+        this.setCurrentSlide(this.state.current + 1);
+        this.play();
+      }, this.props.autoplayInterval);
+    });
+    (0, _defineProperty2.default)(this, "stop", () => {
+      if (this.playTimer) {
+        clearTimeout(this.playTimer);
+        this.playTimer = null;
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleResize", _ref => {
+      let {
+        bounds
+      } = _ref;
+      const node = this.genuineRef.current;
+      if (!node) {
+        return;
+      }
+      const {
+        slideWidths,
+        totalWidth
+      } = calcWidths(node);
+      this.setState({
+        slideWidths,
+        totalWidth,
+        showControls: (bounds?.width || 0) < totalWidth
+      });
+    });
+    (0, _defineProperty2.default)(this, "renderNavigationDots", () => {
+      const {
+        children,
+        baseClassName,
+        dots,
+        items
+      } = this.props;
+      if (!dots || !items) {
+        return null;
+      }
+      const {
+        current
+      } = this.state;
+      const childrenCount = children?.length ?? 1;
+      const pages = Math.ceil(childrenCount / items);
+      if (pages <= 1) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__dots`,
+        children: Array.from({
+          length: pages
+        }).map((_, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          role: "button",
+          className: (0, _classnames.default)(`${baseClassName}__dots--dot`, current === idx ? `${baseClassName}__dots--dot-current` : null),
+          "aria-current": current === idx,
+          onClick: () => this.setCurrentSlide(idx)
+          // eslint-disable-next-line react/no-array-index-key
+          ,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "dot-big"
+          })
+        }, idx))
+      });
+    });
+    (0, _defineProperty2.default)(this, "renderNavigationArrows", () => {
+      const {
+        baseClassName,
+        arrows
+      } = this.props;
+      const {
+        showControls
+      } = this.state;
+      if (!arrows || !showControls) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: `${baseClassName}__controls`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          "aria-label": "previous slide",
+          className: (0, _classnames.default)(`${baseClassName}__control`, `${baseClassName}__control--previous`),
+          onClick: this.handlePrevClick,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "chevron-left",
+            flipHorizontal: this.isRtl,
+            className: `${baseClassName}__control-icon`
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          "aria-label": "next slide",
+          className: (0, _classnames.default)(`${baseClassName}__control`, `${baseClassName}__control--next`),
+          onClick: this.handleNextClick,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: "chevron-right",
+            flipHorizontal: this.isRtl,
+            className: `${baseClassName}__control-icon`
+          })
+        })]
+      });
+    });
+    (0, _defineProperty2.default)(this, "renderSliderItems", () => {
+      const {
+        children,
+        baseClassName,
+        items
+      } = this.props;
+      const childrenCount = children?.length ?? 1;
+      let width = '';
+      if (items) {
+        width = `calc(100% / ${Math.min(childrenCount, items)})`;
+      }
+      return _react.Children.map(children, item => item && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__item`,
+        style: {
+          width
+        },
+        children: item
+      }));
+    });
   }
   componentDidMount() {
     this.isRtl = (0, _utils.isRtl)();
-    this.play();
+    if (this.props.autoplay) {
+      this.play();
+    }
   }
   componentDidUpdate() {
     if (!this.rootRef.current || !this.genuineRef.current) {
@@ -63,6 +187,23 @@ class Carousel extends _react.Component {
     const {
       width
     } = this.rootRef.current.getBoundingClientRect();
+    const {
+      items,
+      children
+    } = this.props;
+    if (items) {
+      const slideItems = items;
+      const childrenCount = children?.length ?? 1;
+      const totalWidth = childrenCount * (width / slideItems);
+      if (this.state.totalWidth !== totalWidth) {
+        this.setState({
+          slideWidths: new Array(childrenCount).fill(width),
+          totalWidth,
+          showControls: childrenCount > slideItems
+        });
+      }
+      return;
+    }
     const {
       slideWidths,
       totalWidth
@@ -81,26 +222,6 @@ class Carousel extends _react.Component {
       clearTimeout(this.movingCallback);
     }
   }
-  handlePrevClick() {
-    this.stop();
-    this.setCurrentSlide(this.state.current - 1);
-  }
-  handleNextClick() {
-    this.stop();
-    this.setCurrentSlide(this.state.current + 1);
-  }
-  play() {
-    this.playTimer = setTimeout(() => {
-      this.setCurrentSlide(this.state.current + 1);
-      this.play();
-    }, this.playSpeed);
-  }
-  stop() {
-    if (this.playTimer) {
-      clearTimeout(this.playTimer);
-      this.playTimer = null;
-    }
-  }
   setCurrentSlide(next) {
     const {
       slideWidths,
@@ -116,6 +237,7 @@ class Carousel extends _react.Component {
     if (current >= slideWidths.length) {
       current = 0;
     }
+    this.props.onSlide?.(next);
     this.setState({
       current,
       next,
@@ -128,25 +250,10 @@ class Carousel extends _react.Component {
       });
     }, this.speed);
   }
-  handleResize(_ref) {
-    let {
-      bounds
-    } = _ref;
-    const node = this.genuineRef.current;
-    if (!node) {
-      return;
-    }
-    const {
-      slideWidths,
-      totalWidth
-    } = calcWidths(node);
-    this.setState({
-      slideWidths,
-      totalWidth,
-      showControls: (bounds?.width || 0) < totalWidth
-    });
-  }
   listStyle() {
+    const {
+      arrows
+    } = this.props;
     const {
       current,
       next,
@@ -155,7 +262,12 @@ class Carousel extends _react.Component {
       totalWidth
     } = this.state;
     const moveTo = moving ? next : current;
-    let x = -totalWidth + 26;
+    let x = -totalWidth;
+
+    // navigation arrows width
+    if (arrows) {
+      x += 26;
+    }
     if (moveTo < 0) {
       for (let i = moveTo; i < 0; i++) {
         x += slideWidths[i + slideWidths.length];
@@ -183,6 +295,12 @@ class Carousel extends _react.Component {
       baseClassName,
       className,
       children,
+      autoplay,
+      autoplayInterval,
+      items,
+      onSlide,
+      dots,
+      arrows,
       ...props
     } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
@@ -198,35 +316,17 @@ class Carousel extends _react.Component {
           className: (0, _classnames.default)(baseClassName, className),
           ...props,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: `${baseClassName}__slides`,
-            style: showControls ? this.listStyle() : undefined,
-            children: [showControls && children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: `${baseClassName}__genuine-slides`,
-              ref: this.genuineRef,
-              children: children
-            }), showControls && children]
-          }), showControls && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: `${baseClassName}__controls`,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-              type: "button",
-              className: (0, _classnames.default)(`${baseClassName}__control`, `${baseClassName}__control--previous`),
-              onClick: this.handlePrevClick,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-                name: "chevron-left",
-                flipHorizontal: this.isRtl,
-                className: `${baseClassName}__control-icon`
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-              type: "button",
-              className: (0, _classnames.default)(`${baseClassName}__control`, `${baseClassName}__control--next`),
-              onClick: this.handleNextClick,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-                name: "chevron-right",
-                flipHorizontal: this.isRtl,
-                className: `${baseClassName}__control-icon`
-              })
-            })]
-          })]
+            className: `${baseClassName}__wrap`,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: `${baseClassName}__slides`,
+              style: showControls ? this.listStyle() : undefined,
+              children: [showControls && this.renderSliderItems(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: `${baseClassName}__genuine-slides`,
+                ref: this.genuineRef,
+                children: this.renderSliderItems()
+              }), showControls && this.renderSliderItems()]
+            }), this.renderNavigationArrows()]
+          }), this.renderNavigationDots()]
         });
       }
     });
@@ -234,6 +334,11 @@ class Carousel extends _react.Component {
 }
 (0, _defineProperty2.default)(Carousel, "defaultProps", {
   children: null,
+  arrows: true,
+  dots: false,
+  autoplay: true,
+  autoplayInterval: 5000,
+  onSlide: null,
   className: null,
   baseClassName: `${_constants.CLS_PREFIX}carousel`
 });

package/cjs/components/Checkbox/Checkbox.js

@@ -11,9 +11,9 @@ var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-/**
- * `Checkbox` component is used for turning an option on or off and selecting or deselecting an item.
- * @since 0.0.55
+/**
+ * `Checkbox` component is used for turning an option on or off and selecting or deselecting an item.
+ * @since 0.0.55
  */
 const Checkbox = _ref => {
   let {

package/cjs/components/CodeEditor/CodeEditor.js

@@ -14,9 +14,9 @@ var _constants = require("../../constants");
 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 && Object.prototype.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; } // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-/**
- * `CodeEditor` component is used for editing text as code with proper color highlighting according to selected programming language.
- * @since 0.0.61
+/**
+ * `CodeEditor` component is used for editing text as code with proper color highlighting according to selected programming language.
+ * @since 0.0.61
  */
 class CodeEditor extends _react.Component {
   constructor() {

package/cjs/components/Columns/Column.js

@@ -14,9 +14,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const normalize = value => String(Number(value)) === String(value) ? `${value}px` : value;
 
-/**
- * `Column` component is a part of [Columns](#!/Columns).
- * @since 2.6.0
+/**
+ * `Column` component is a part of [Columns](#!/Columns).
+ * @since 2.6.0
  */
 const Column = _ref => {
   let {

package/cjs/components/Columns/Columns.js

@@ -15,9 +15,9 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 && Object.prototype.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; }
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-/**
- * `Columns` component is used for creating of multi-column layouts.
- * @since 2.6.0
+/**
+ * `Columns` component is used for creating of multi-column layouts.
+ * @since 2.6.0
  */
 const Columns = _ref => {
   let {

package/cjs/components/ComboBox/ComboBox.js

@@ -45,10 +45,10 @@ const collect = function (children) {
     options
   };
 };
-/**
- * `ComboBox` component is a combination of [Select](#!/Select) and [Input](#!/Input)
- *  which allows to either enter a value directly into the field or choose from a list of existing options.
- * @since 2.6.0
+/**
+ * `ComboBox` component is a combination of [Select](#!/Select) and [Input](#!/Input)
+ *  which allows to either enter a value directly into the field or choose from a list of existing options.
+ * @since 2.6.0
  */
 const ComboBox = _ref => {
   let {

package/cjs/components/ComboBox/ComboBoxOption.js

@@ -7,10 +7,11 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-/**
- * `ComboBoxOption` is a part of [ComboBox](#!/ComboBox) component.
- * @since 2.6.0
- */ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+/**
+ * `ComboBoxOption` is a part of [ComboBox](#!/ComboBox) component.
+ * @since 2.6.0
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const ComboBoxOption = _props => {
   // styleguidist doesn't show Props & Methods if component renders nothing
   // eslint-disable-next-line no-constant-condition

package/cjs/components/ConsoleOutput/ConsoleOutput.js

@@ -15,9 +15,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 const scrollToBottom = el => {
   el.scrollTop = el.scrollHeight;
 };
-/**
- * `ConsoleOutput` component is used for showing dynamically updating data from console output.
- * @since 0.0.35
+/**
+ * `ConsoleOutput` component is used for showing dynamically updating data from console output.
+ * @since 0.0.35
  */
 class ConsoleOutput extends _react.PureComponent {
   constructor() {

package/cjs/components/ContentLoader/ContentLoader.js

@@ -31,9 +31,9 @@ const getLoader = loader => {
   };
 };
 
-/**
- * `ContentLoader` component is used as placeholder which indicates that the system is loading requested content.
- * @since 1.1.0
+/**
+ * `ContentLoader` component is used as placeholder which indicates that the system is loading requested content.
+ * @since 1.1.0
  */
 const ContentLoader = _ref => {
   let {

package/cjs/components/Cuttable/Cuttable.js

@@ -15,9 +15,9 @@ var _Link = _interopRequireDefault(require("../Link"));
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-/**
- * `Cuttable` component is used for showing and hiding part of content.
- * @since 0.0.42
+/**
+ * `Cuttable` component is used for showing and hiding part of content.
+ * @since 0.0.42
  */
 class Cuttable extends _react.Component {
   constructor() {

package/cjs/components/Dialog/Dialog.js

@@ -23,9 +23,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const isProps = value => value && typeof value === 'object' && ! /*#__PURE__*/(0, _react.isValidElement)(value);
 
-/**
- * `Dialog` is a modal window that asks users to make a decision or enter additional information.
- * @since 0.0.68
+/**
+ * `Dialog` is a modal window that asks users to make a decision or enter additional information.
+ * @since 0.0.68
  */
 const Dialog = _ref => {
   let {

package/cjs/components/Drawer/Drawer.js

@@ -37,10 +37,10 @@ const defaultProps = {
   className: undefined,
   baseClassName: `${_constants.CLS_PREFIX}drawer`
 };
-/**
- * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
- * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
- * @since 0.0.65
+/**
+ * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
+ * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
+ * @since 0.0.65
  */
 const Drawer = _ref => {
   let {

package/cjs/components/Dropdown/Dropdown.js

@@ -124,11 +124,11 @@ const useEnhancedMenu = (menu, _ref2) => {
   };
 };
 
-/**
- * `Dropdown` component is a [Button](#!/Button) that opens a drop-down (nested) [Menu](#!/Menu).
- * Use dropdown for grouping actions that are not used often or are less important than others -- in other words,
- * for stuff that you don't want to show users all the time, especially if you have limited screen space.
- * @since 0.0.57
+/**
+ * `Dropdown` component is a [Button](#!/Button) that opens a drop-down (nested) [Menu](#!/Menu).
+ * Use dropdown for grouping actions that are not used often or are less important than others -- in other words,
+ * for stuff that you don't want to show users all the time, especially if you have limited screen space.
+ * @since 0.0.57
  */
 const Dropdown = _ref3 => {
   let {

package/cjs/components/ExtendedStatusMessage/ExtendedStatusMessage.js

@@ -11,10 +11,10 @@ var _constants = require("../../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-/**
- * `ExtendedStatusMessage` component is similar to regular [StatusMessage](#!/StatusMessage)
- * but it is used when the message itself is the primary content on the page.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessage` component is similar to regular [StatusMessage](#!/StatusMessage)
+ * but it is used when the message itself is the primary content on the page.
+ * @since 0.0.35
  */
 const ExtendedStatusMessage = _ref => {
   let {

package/cjs/components/ExtendedStatusMessage/ExtendedStatusMessageActions.js

@@ -10,9 +10,9 @@ var _constants = require("../../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-/**
- * `ExtendedStatusMessageActions` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessageActions` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
+ * @since 0.0.35
  */
 
 const ExtendedStatusMessageActions = _ref => {

package/cjs/components/ExtendedStatusMessage/ExtendedStatusMessageDescription.js

@@ -10,9 +10,9 @@ var _constants = require("../../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-/**
- * `ExtendedStatusMessageDescription` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessageDescription` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
+ * @since 0.0.35
  */
 
 const ExtendedStatusMessageDescription = _ref => {

package/cjs/components/ExtendedStatusMessage/ExtendedStatusMessageSeparator.js

@@ -9,9 +9,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-/**
- * `ExtendedStatusMessageSeparator` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessageSeparator` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
+ * @since 0.0.35
  */
 
 const ExtendedStatusMessageSeparator = _ref => {

package/cjs/components/ExtendedStatusMessage/ExtendedStatusMessageTitle.js

@@ -11,9 +11,9 @@ var _Heading = _interopRequireDefault(require("../Heading"));
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-/**
- * `ExtendedStatusMessageTitle` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
- * @since 0.0.35
+/**
+ * `ExtendedStatusMessageTitle` is a part of [ExtendedStatusMessage](#!/ExtendedStatusMessage) component.
+ * @since 0.0.35
  */
 
 const ExtendedStatusMessageTitle = _ref => {

package/cjs/components/Figure/Figure.js

@@ -10,9 +10,9 @@ var _constants = require("../../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-/**
- * Figure component.
- * @since 0.0.42
+/**
+ * Figure component.
+ * @since 0.0.42
  */
 const Figure = _ref => {
   let {

package/cjs/components/Form/Form.js

@@ -413,9 +413,9 @@ const RefForwardingForm = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   });
 });
 RefForwardingForm.displayName = 'Form';
-/**
- * `Form` component is used for entering and submitting of user data.
- * [More details about designing of forms.](#!/Good%20Forms)
- * @since 0.0.54
+/**
+ * `Form` component is used for entering and submitting of user data.
+ * [More details about designing of forms.](#!/Good%20Forms)
+ * @since 0.0.54
  */
 var _default = exports.default = RefForwardingForm;