@canonical/react-components 0.59.0 → 0.60.0

package/dist/components/ConfirmationModal/ConfirmationModal.js

@@ -10,9 +10,13 @@ var _Modal = _interopRequireDefault(require("../Modal"));
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
+/**
+ * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
+ */
 const ConfirmationModal = _ref => {
   let {
     cancelButtonLabel = "Cancel",
+    cancelButtonProps,
     children,
     confirmButtonAppearance = "negative",
     confirmButtonLabel,
@@ -20,6 +24,7 @@ const ConfirmationModal = _ref => {
     onConfirm,
     confirmButtonLoading,
     confirmButtonDisabled,
+    confirmButtonProps,
     ...props
   } = _ref;
   const handleClick = action => event => {
@@ -31,16 +36,16 @@ const ConfirmationModal = _ref => {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
-    buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, confirmExtra, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, confirmExtra, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, cancelButtonProps, {
       className: "u-no-margin--bottom",
       onClick: handleClick(props.close)
-    }, cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+    }), cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_ActionButton.default, _extends({}, confirmButtonProps, {
       appearance: confirmButtonAppearance,
       className: "u-no-margin--bottom",
       onClick: handleClick(onConfirm),
       loading: confirmButtonLoading,
       disabled: confirmButtonDisabled
-    }, confirmButtonLabel))
+    }), confirmButtonLabel))
   }, props), children);
 };
 exports.ConfirmationModal = ConfirmationModal;

package/dist/components/ConfirmationModal/ConfirmationModal.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ConfirmationModal from "./ConfirmationModal";
+declare const meta: Meta<typeof ConfirmationModal>;
+export default meta;
+type Story = StoryObj<typeof ConfirmationModal>;
+export declare const Default: Story;
+/**
+ * The title is optional, and the content is fully customisable.
+ */
+export declare const NoTitle: Story;
+/**
+ * The appearance of the confirm button can be any of the `Button`'s appearance values.
+ */
+export declare const Positive: Story;
+/**
+ * Extra elements can be added to the button row.
+ */
+export declare const Extra: Story;

package/dist/components/ConfirmationModal/ConfirmationModal.stories.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Positive = exports.NoTitle = exports.Extra = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ConfirmationModal = _interopRequireDefault(require("./ConfirmationModal"));
+var _Input = _interopRequireDefault(require("../Input"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+const doNothing = () => {};
+const meta = {
+  component: _ConfirmationModal.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Open confirmation modal"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
+      title: "Confirm delete",
+      confirmButtonLabel: "Delete",
+      onConfirm: doNothing,
+      close: closeHandler
+    }, /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")) : null);
+  },
+  name: "Default"
+};
+
+/**
+ * The title is optional, and the content is fully customisable.
+ */
+const NoTitle = exports.NoTitle = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Run"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
+      close: closeHandler,
+      confirmButtonAppearance: "positive",
+      confirmButtonLabel: "Confirm",
+      onConfirm: doNothing
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: "1rem 0"
+      }
+    }, "Run list-backups?"), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: "480px",
+        marginBottom: "1rem"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-text--muted"
+    }, "UNIT COUNT"), /*#__PURE__*/_react.default.createElement("div", null, "1")), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginBottom: "1.5rem"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-text--muted"
+    }, "UNIT NAME"), /*#__PURE__*/_react.default.createElement("div", null, "mysql/0"))) : null);
+  },
+  name: "No title"
+};
+
+/**
+ * The appearance of the confirm button can be any of the `Button`'s appearance values.
+ */
+const Positive = exports.Positive = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Apply changes"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
+      close: closeHandler,
+      confirmButtonAppearance: "positive",
+      confirmButtonLabel: "Yes, apply changes",
+      onConfirm: doNothing
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: "1rem 0"
+      }
+    }, "Are you sure you wish to apply these changes?"), /*#__PURE__*/_react.default.createElement("p", null, "You have edited the following values to the mysql configuration:"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h5", {
+      className: "u-no-margin--bottom"
+    }, "cluster-name"), /*#__PURE__*/_react.default.createElement("pre", {
+      className: "u-no-padding",
+      style: {
+        backgroundColor: "transparent"
+      }
+    }, "test")), /*#__PURE__*/_react.default.createElement("div", {
+      className: "p-text--small",
+      style: {
+        width: "480px"
+      }
+    }, "You can revert back to the applications default settings by clicking the \u201CReset all values\u201D button; or reset each edited field by clicking \u201CUse default\u201D.")) : null);
+  },
+  name: "Positive"
+};
+
+/**
+ * Extra elements can be added to the button row.
+ */
+const Extra = exports.Extra = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+    const closeHandler = () => setModalOpen(false);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: () => setModalOpen(true)
+    }, "Stop"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
+      confirmExtra: /*#__PURE__*/_react.default.createElement("span", {
+        className: "u-float-left"
+      }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+        type: "checkbox",
+        id: "extraCheckbox",
+        label: "Force stop",
+        tabIndex: -1
+      })),
+      title: "Confirm stop",
+      confirmButtonLabel: "Stop",
+      onConfirm: doNothing,
+      close: closeHandler
+    }, /*#__PURE__*/_react.default.createElement("p", null, "This will stop instance", /*#__PURE__*/_react.default.createElement("b", null, "whimsical-mouflon"), ".")) : null);
+  },
+  name: "Extra"
+};

package/dist/components/ContextualMenu/ContextualMenu.d.ts

@@ -98,26 +98,9 @@ export type Props<L> = PropsWithSpread<{
     visible?: boolean;
 }, HTMLProps<HTMLSpanElement>>;
 /**
- * A component for the Vanilla contextual menu.
- * @template L - The type of the link props.
- * @param [autoAdjust=true] - Whether the menu should adjust to fit in the screen.
- * @param children - The menu content (if the links prop is not supplied).
- * @param className - An optional class to apply to the wrapping element.
- * @param [closeOnEsc=true] - Whether the menu should close when the escape key is pressed.
- * @param [closeOnOutsideClick=true] - Whether the menu should close when clicking outside the menu.
- * @param constrainPanelWidth - Whether the menu's width should match the toggle's width.
- * @param dropdownClassName - An optional class to apply to the dropdown.
- * @param hasToggleIcon - Whether the toggle should display a chevron icon.
- * @param links - A list of links to display in the menu (if the children prop is not supplied.)
- * @param onToggleMenu - A function to call when the menu is toggled.
- * @param [position="right"] - The position of the menu.
- * @param positionNode - An element to make the menu relative to.
- * @param toggleAppearance - The appearance of the toggle button.
- * @param toggleClassName - An class to apply to the toggle button.
- * @param toggleDisabled - Whether the toggle button should be disabled.
- * @param toggleLabel - The toggle button's label.
- * @param [toggleLabelFirst=true] - Whether the toggle lable or icon should appear first.
- * @param [visible=false] - Whether the menu should be visible.
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Contextual menu](https://docs.vanillaframework.io/patterns//contextual-menu/).
+ *
+ * A contextual menu can be used in conjunction with any page element to provide a contextual menu.
  */
 declare const ContextualMenu: <L>({ autoAdjust, children, className, closeOnEsc, closeOnOutsideClick, constrainPanelWidth, dropdownClassName, dropdownProps, hasToggleIcon, links, onToggleMenu, position, positionNode, scrollOverflow, toggleAppearance, toggleClassName, toggleDisabled, toggleLabel, toggleLabelFirst, toggleProps, visible, ...wrapperProps }: Props<L>) => JSX.Element;
 export default ContextualMenu;

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -49,26 +49,9 @@ const getPositionNodeVisible = positionNode => {
 };
 
 /**
- * A component for the Vanilla contextual menu.
- * @template L - The type of the link props.
- * @param [autoAdjust=true] - Whether the menu should adjust to fit in the screen.
- * @param children - The menu content (if the links prop is not supplied).
- * @param className - An optional class to apply to the wrapping element.
- * @param [closeOnEsc=true] - Whether the menu should close when the escape key is pressed.
- * @param [closeOnOutsideClick=true] - Whether the menu should close when clicking outside the menu.
- * @param constrainPanelWidth - Whether the menu's width should match the toggle's width.
- * @param dropdownClassName - An optional class to apply to the dropdown.
- * @param hasToggleIcon - Whether the toggle should display a chevron icon.
- * @param links - A list of links to display in the menu (if the children prop is not supplied.)
- * @param onToggleMenu - A function to call when the menu is toggled.
- * @param [position="right"] - The position of the menu.
- * @param positionNode - An element to make the menu relative to.
- * @param toggleAppearance - The appearance of the toggle button.
- * @param toggleClassName - An class to apply to the toggle button.
- * @param toggleDisabled - Whether the toggle button should be disabled.
- * @param toggleLabel - The toggle button's label.
- * @param [toggleLabelFirst=true] - Whether the toggle lable or icon should appear first.
- * @param [visible=false] - Whether the menu should be visible.
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Contextual menu](https://docs.vanillaframework.io/patterns//contextual-menu/).
+ *
+ * A contextual menu can be used in conjunction with any page element to provide a contextual menu.
  */
 const ContextualMenu = _ref => {
   let {

package/dist/components/ContextualMenu/ContextualMenu.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ContextualMenu from "./ContextualMenu";
+declare const meta: Meta<typeof ContextualMenu>;
+export default meta;
+type Story = StoryObj<typeof ContextualMenu>;
+/**
+ * The contextual menu will provide a visual wrapper to any provided children. Visibility can be toggled via the `visible` prop.
+ */
+export declare const Default: Story;
+export declare const Toggle: Story;
+export declare const OverflowingContainer: Story;
+export declare const ChildFunction: Story;
+export declare const ChildElement: Story;

package/dist/components/ContextualMenu/ContextualMenu.stories.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Toggle = exports.OverflowingContainer = exports.Default = exports.ChildFunction = exports.ChildElement = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ScrollTemplate = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    maxWidth: "30rem",
+    maxHeight: "10rem",
+    overflow: "auto",
+    padding: "1rem"
+  }
+}, /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, args), Array(3).fill( /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")), /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, args));
+const Template = args => /*#__PURE__*/_react.default.createElement("div", {
+  className: "u-align--center"
+}, /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, args));
+const meta = {
+  component: _ContextualMenu.default,
+  render: Template,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        disable: true
+      }
+    },
+    links: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+/**
+ * The contextual menu will provide a visual wrapper to any provided children. Visibility can be toggled via the `visible` prop.
+ */
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        padding: "1rem"
+      }
+    }, "This is a menu."),
+    closeOnOutsideClick: false,
+    constrainPanelWidth: false,
+    position: "left",
+    visible: true
+  }
+};
+const Toggle = exports.Toggle = {
+  name: "Toggle",
+  args: {
+    links: [{
+      children: "Link 1",
+      onClick: () => {}
+    }, {
+      children: "Link 2",
+      onClick: () => {}
+    }],
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  }
+};
+const OverflowingContainer = exports.OverflowingContainer = {
+  render: ScrollTemplate.bind({}),
+  name: "Overflowing container",
+  args: {
+    links: [{
+      children: "Link 1",
+      onClick: () => {}
+    }, {
+      children: "Long Link 2",
+      onClick: () => {}
+    }],
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  }
+};
+const ChildFunction = exports.ChildFunction = {
+  name: "Child function",
+  args: {
+    children: close => /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: close
+    }, "child function"),
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  }
+};
+const ChildElement = exports.ChildElement = {
+  name: "Child element",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(_Button.default, null, "child element"),
+    hasToggleIcon: true,
+    position: "right",
+    toggleLabel: "Click me!"
+  }
+};

package/dist/components/EmptyState/EmptyState.d.ts

@@ -18,5 +18,8 @@ export type Props = PropsWithSpread<{
      */
     title: string;
 }, HTMLProps<HTMLDivElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component to represent an empty state.
+ */
 export declare const EmptyState: ({ children, className, image, title, ...props }: Props) => ReactElement;
 export default EmptyState;

package/dist/components/EmptyState/EmptyState.js

@@ -8,6 +8,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
+/**
+ * This is a [React](https://reactjs.org/) component to represent an empty state.
+ */
 const EmptyState = _ref => {
   let {
     children,

package/dist/components/EmptyState/EmptyState.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import EmptyState from "./EmptyState";
+declare const meta: Meta<typeof EmptyState>;
+export default meta;
+type Story = StoryObj<typeof EmptyState>;
+export declare const Default: Story;
+export declare const WithContent: Story;

package/dist/components/EmptyState/EmptyState.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithContent = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _EmptyState = _interopRequireDefault(require("./EmptyState"));
+var _Icon = _interopRequireWildcard(require("../Icon"));
+var _Button = _interopRequireDefault(require("../Button"));
+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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const boxImage = /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://assets.ubuntu.com/v1/c17e0d92-container.svg",
+  style: {
+    maxWidth: "10rem",
+    maxHeight: "10rem"
+  },
+  alt: "empty state"
+});
+const doNothing = () => {};
+const meta = {
+  component: _EmptyState.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_EmptyState.default, {
+    image: boxImage,
+    title: "This application doesn't have any configuration parameters"
+  }),
+  name: "Default"
+};
+const WithContent = exports.WithContent = {
+  render: () => /*#__PURE__*/_react.default.createElement(_EmptyState.default, {
+    image: boxImage,
+    title: "No instances found"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "There are no instances in this project. Spin up your first instance!"), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#todo",
+    target: "_blank"
+  }, "How to create instances", /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: _Icon.ICONS.externalLink
+  }))), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    appearance: "positive",
+    onClick: doNothing
+  }, "Create instance")),
+  name: "With content"
+};

package/dist/components/Form/Form.d.ts

@@ -12,5 +12,10 @@ export type Props = PropsWithSpread<{
     inline?: boolean;
     stacked?: boolean;
 }, HTMLProps<HTMLFormElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Form](https://docs.vanillaframework.io/base/forms).
+ *
+ * Form controls have global styling defined at the HTML element level. Labels and most input types are 100% width of the `<form>` parent element.
+ */
 declare const Form: ({ children, className, inline, stacked, ...props }: Props) => JSX.Element;
 export default Form;

package/dist/components/Form/Form.js

@@ -8,6 +8,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Form](https://docs.vanillaframework.io/base/forms).
+ *
+ * Form controls have global styling defined at the HTML element level. Labels and most input types are 100% width of the `<form>` parent element.
+ */
 const Form = _ref => {
   let {
     children,

package/dist/components/Form/Form.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Form from "./Form";
+declare const meta: Meta<typeof Form>;
+export default meta;
+type Story = StoryObj<typeof Form>;
+export declare const Default: Story;
+export declare const Fieldset: Story;
+export declare const Inline: Story;
+export declare const Stacked: Story;
+export declare const Disabled: Story;
+export declare const Validation: Story;
+export declare const Required: Story;