@canonical/react-components 1.2.4 → 1.3.0

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

@@ -1,49 +0,0 @@
-"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 && {}.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 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/EmptyState/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./EmptyState";
-export type { Props as EmptyStateProps } from "./EmptyState";

package/dist/components/Field/Field.d.ts

@@ -1,77 +0,0 @@
-import type { ReactNode } from "react";
-import type { ClassName } from "../../types";
-/**
- * The props for the Field component.
- */
-export type Props = {
-    /**
-     * The content for caution validation.
-     */
-    caution?: ReactNode;
-    /**
-     * The content of the Field component.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to pass to the Field wrapper div.
-     */
-    className?: ClassName;
-    /**
-     * The content for error validation.
-     */
-    error?: ReactNode;
-    /**
-     * The id of the input this Field component is controlling.
-     */
-    forId?: string;
-    /**
-     * Help text to show below the field.
-     */
-    help?: ReactNode;
-    /**
-     * Optional class(es) to pass to the help text element.
-     */
-    helpClassName?: string;
-    /**
-     * An id to give to the help element.
-     */
-    helpId?: string;
-    /**
-     * Whether the component is wrapping a select element.
-     */
-    isSelect?: boolean;
-    /**
-     * Whether the component is wrapping a checkbox or radio element.
-     */
-    isTickElement?: boolean;
-    /**
-     * The label for the field.
-     */
-    label?: ReactNode;
-    /**
-     * Optional class(es) to pass to the label component.
-     */
-    labelClassName?: string | null;
-    /**
-     * Whether the label should show before the input.
-     */
-    labelFirst?: boolean;
-    /**
-     * Whether the field is required.
-     */
-    required?: boolean;
-    /**
-     * Whether the form field should have a stacked appearance.
-     */
-    stacked?: boolean;
-    /**
-     * The content for success validation.
-     */
-    success?: ReactNode;
-    /**
-     * An id to give to the caution, error or success element.
-     */
-    validationId?: string;
-};
-declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, success, validationId, ...props }: Props) => JSX.Element;
-export default Field;

package/dist/components/Field/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./Field";
-export type { Props as FieldProps } from "./Field";

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

@@ -1,21 +0,0 @@
-import type { HTMLProps, ReactNode } from "react";
-import type { ClassName, PropsWithSpread } from "../../types";
-export type Props = PropsWithSpread<{
-    /**
-     * The content of the form.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to pass to the form element.
-     */
-    className?: ClassName;
-    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.stories.d.ts

@@ -1,12 +0,0 @@
-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;

package/dist/components/Form/Form.stories.js

@@ -1,179 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Validation = exports.Stacked = exports.Required = exports.Inline = exports.Fieldset = exports.Disabled = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Form = _interopRequireDefault(require("./Form"));
-var _Input = _interopRequireDefault(require("../Input"));
-var _Select = _interopRequireDefault(require("../Select"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Form.default,
-  tags: ["autodocs"],
-  argTypes: {
-    children: {
-      control: {
-        disable: true
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
-      type: "text",
-      id: "exampleInputEmail12",
-      placeholder: "example@canonical.com",
-      label: "Email address"
-    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-      type: "password",
-      id: "exampleInputPassword12",
-      placeholder: "******",
-      label: "Password"
-    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-      type: "file",
-      id: "exampleInputFile2",
-      label: "File input"
-    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-      type: "checkbox",
-      id: "CheckMe2",
-      label: "I agree to receive information about Canonical’s products and services."
-    }))
-  }
-};
-const Fieldset = exports.Fieldset = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement("fieldset", null, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    placeholder: "Joe",
-    id: "list-input-12",
-    type: "text",
-    label: "First name"
-  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    placeholder: "Bloggs",
-    id: "list-input-22",
-    type: "text",
-    label: "Last name"
-  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    placeholder: "example@canonical.com",
-    id: "list-input-32",
-    type: "text",
-    label: "Email address"
-  }))),
-  name: "Fieldset"
-};
-const Inline = exports.Inline = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, {
-    inline: true
-  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "username-inline2",
-    className: "p-form__control",
-    label: "Username",
-    help: "30 characters or fewer."
-  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "address-inline22",
-    "aria-invalid": "true",
-    label: "Email address",
-    error: "Please enter a valid email address."
-  })),
-  name: "Inline"
-};
-const Stacked = exports.Stacked = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, {
-    stacked: true
-  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "full-name-stacked2",
-    label: "Full name",
-    stacked: true
-  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "username-stacked2",
-    label: "Username",
-    stacked: true,
-    help: "30 characters or fewer."
-  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "username-stacked-error2",
-    label: "Email address",
-    stacked: true,
-    error: "This field is required"
-  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "address-optional-stacked2",
-    label: "Address line 1",
-    stacked: true
-  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "address-optional-stacked3",
-    label: "Address line 2",
-    stacked: true
-  })),
-  name: "Stacked"
-};
-const Disabled = exports.Disabled = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    label: "Email address",
-    type: "text",
-    id: "disabled-input2",
-    placeholder: "example@canonical.com",
-    disabled: true
-  })),
-  name: "Disabled"
-};
-const Validation = exports.Validation = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "exampleTextInputError2",
-    placeholder: "example@canonical.com",
-    label: "Email address",
-    error: "This field is required."
-  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "exampleTextInputCaution2",
-    placeholder: "14",
-    label: "Mail configuration ID",
-    caution: "No validation is performed in preview mode."
-  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "exampleTextInputSuccess2",
-    placeholder: "**** **** **** ****",
-    label: "Card number",
-    success: "Verified."
-  }), /*#__PURE__*/_react.default.createElement(_Select.default, {
-    id: "exampleSelectInputError3",
-    defaultValue: "",
-    options: [{
-      value: "",
-      disabled: true,
-      label: "--Select an option--"
-    }, {
-      value: "1",
-      label: "Cosmic Cuttlefish"
-    }, {
-      value: "2",
-      label: "Bionic Beaver"
-    }, {
-      value: "3",
-      label: "Xenial Xerus"
-    }],
-    label: "Ubuntu releases",
-    error: "You need to select an OS to complete your install."
-  })),
-  name: "Validation"
-};
-const Required = exports.Required = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "text",
-    id: "exampleTextInputError3",
-    placeholder: "e.g joe@bloggs.com",
-    error: "This field is required.",
-    label: "Email address",
-    required: true
-  })),
-  name: "Required"
-};

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

@@ -1,2 +0,0 @@
-export { default } from "./Form";
-export type { Props as FormProps } from "./Form";

package/dist/components/FormikField/FormikField.d.ts

@@ -1,25 +0,0 @@
-import { type ComponentProps, type ComponentType, type ElementType, type HTMLProps } from "react";
-import Input from "../Input";
-export type Props<C extends ElementType | ComponentType = typeof Input> = {
-    /**
-     * The component to display.
-     * @default Input
-     */
-    component?: C;
-    /**
-     * This can be used to hide errors returned by Formik.
-     */
-    displayError?: boolean;
-    /**
-     * The name of the field as given to Formik.
-     */
-    name: string;
-    value?: HTMLProps<HTMLElement>["value"];
-} & ComponentProps<C>;
-/**
- * This component makes it easier to use Vanilla form inputs with Formik. It
- * makes use of Formik's context to automatically map errors, values, states
- * etc. onto the provided field.
- */
-declare const FormikField: <C extends ElementType | ComponentType = ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: import("../Input").InputProps) => JSX.Element>({ component: Component, displayError, name, value, label, ...props }: Props<C>) => JSX.Element;
-export default FormikField;

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

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

package/dist/components/FormikField/FormikField.stories.js

@@ -1,85 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Fields = exports.Errors = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _FormikField = _interopRequireDefault(require("./FormikField"));
-var _Select = _interopRequireDefault(require("../Select"));
-var _formik = require("formik");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _FormikField.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  args: {
-    name: "username",
-    label: "Username",
-    type: "text"
-  },
-  render: args => /*#__PURE__*/_react.default.createElement(_formik.Formik, {
-    initialValues: {
-      username: ""
-    },
-    onSubmit: () => {}
-  }, /*#__PURE__*/_react.default.createElement(_FormikField.default, args))
-};
-const Fields = exports.Fields = {
-  args: {
-    component: _Select.default,
-    name: "release",
-    label: "Release",
-    options: [{
-      value: "",
-      disabled: true,
-      label: "Select an option"
-    }, {
-      value: "1",
-      label: "Cosmic Cuttlefish"
-    }, {
-      value: "2",
-      label: "Bionic Beaver"
-    }, {
-      value: "3",
-      label: "Xenial Xerus"
-    }]
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "\nAny React Components input can be provided to FormikField (e.g. Input, Textarea or Select) or you may provide a custom component.\n\nAny additional props that need to be passed can be given to FormikField.\n        "
-      }
-    }
-  },
-  render: args => /*#__PURE__*/_react.default.createElement(_formik.Formik, {
-    initialValues: {
-      release: ""
-    },
-    onSubmit: () => {}
-  }, /*#__PURE__*/_react.default.createElement(_FormikField.default, args))
-};
-const Errors = exports.Errors = {
-  args: Default.args,
-  parameters: {
-    docs: {
-      description: {
-        story: "\nFormik parameters are passed to the field using Formik's `useField`. This means that validation and errors, state handlers etc. should all just work.\n        "
-      }
-    }
-  },
-  render: args => /*#__PURE__*/_react.default.createElement(_formik.Formik, {
-    initialErrors: {
-      username: "This username has already been taken."
-    },
-    initialTouched: {
-      username: true
-    },
-    initialValues: {
-      username: ""
-    },
-    onSubmit: () => {}
-  }, /*#__PURE__*/_react.default.createElement(_FormikField.default, args))
-};

package/dist/components/FormikField/index.d.ts

@@ -1 +0,0 @@
-export { default, type Props as FormikFieldProps } from "./FormikField";

package/dist/components/Icon/Icon.d.ts

@@ -1,59 +0,0 @@
-import type { HTMLProps } from "react";
-import type { ClassName, PropsWithSpread, ValueOf } from "../../types";
-export declare const ICONS: {
-    readonly anchor: "anchor";
-    readonly chevronDown: "chevron-down";
-    readonly chevronUp: "chevron-up";
-    readonly close: "close";
-    readonly code: "code";
-    readonly collapse: "collapse";
-    readonly copy: "copy";
-    readonly delete: "delete";
-    readonly drag: "drag";
-    readonly error: "error";
-    readonly expand: "expand";
-    readonly externalLink: "external-link";
-    readonly help: "help";
-    readonly information: "information";
-    readonly menu: "menu";
-    readonly minus: "minus";
-    readonly plus: "plus";
-    readonly search: "search";
-    readonly share: "share";
-    readonly spinner: "spinner";
-    readonly success: "success";
-    readonly user: "user";
-    readonly warning: "warning";
-    readonly facebook: "facebook";
-    readonly twitter: "twitter";
-    readonly instagram: "instagram";
-    readonly linkedin: "linkedin";
-    readonly youtube: "youtube";
-    readonly github: "github";
-    readonly rss: "rss";
-    readonly email: "email";
-};
-export type Props = PropsWithSpread<{
-    /**
-     * Optional classes to add to the icon element.
-     */
-    className?: ClassName;
-    /**
-     * Whether to show the light variant of the icon.
-     */
-    light?: boolean;
-    /**
-     * The name of the icon.
-     */
-    name: ValueOf<typeof ICONS> | string;
-}, HTMLProps<HTMLElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Icon](https://docs.vanillaframework.io/patterns/icons/).
- *
- * Icons provide visual context and enhance usability.
- *
- * @param name One of built-in Vanilla icons or a name of a custom icon that follows `p-icon--{name}` convention.
- * @returns Icon
- */
-declare const Icon: ({ className, light, name, ...props }: Props) => JSX.Element;
-export default Icon;

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

@@ -1,16 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Icon from "./Icon";
-import "./Icon.stories.scss";
-declare const meta: Meta<typeof Icon>;
-export default meta;
-type Story = StoryObj<typeof Icon>;
-export declare const Base: Story;
-export declare const Default: Story;
-/**
- * To use custom icons that are not included in Vanilla you need to provide your own icon styling following the `.p-icon--{name}` convention.
- */
-export declare const Custom: Story;
-/**
- * To use custom icons that provide the name of the social media icon following the `.p-icon--{name}` convention.
- */
-export declare const Social: Story;

package/dist/components/Icon/Icon.stories.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Social = exports.Default = exports.Custom = exports.Base = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Icon = _interopRequireWildcard(require("./Icon"));
-require("./Icon.stories.scss");
-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 meta = {
-  component: _Icon.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Base = exports.Base = {
-  name: "Base",
-  args: {
-    name: "facebook"
-  }
-};
-const Default = exports.Default = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: _Icon.ICONS.plus
-  }),
-  name: "Default"
-};
-
-/**
- * To use custom icons that are not included in Vanilla you need to provide your own icon styling following the `.p-icon--{name}` convention.
- */
-const Custom = exports.Custom = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "custom"
-  }),
-  name: "Custom"
-};
-
-/**
- * To use custom icons that provide the name of the social media icon following the `.p-icon--{name}` convention.
- */
-const Social = exports.Social = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: _Icon.ICONS.facebook
-  }),
-  name: "Social"
-};

package/dist/components/Icon/index.d.ts

@@ -1,2 +0,0 @@
-export { default, ICONS } from "./Icon";
-export type { Props as IconProps } from "./Icon";

package/dist/components/Input/Input.d.ts

@@ -1,70 +0,0 @@
-import type { InputHTMLAttributes, ReactNode } from "react";
-import type { ClassName, PropsWithSpread } from "../../types";
-/**
- * The props for the Input component.
- */
-export type Props = PropsWithSpread<{
-    /**
-     * The content for caution validation.
-     */
-    caution?: ReactNode;
-    /**
-     * Optional class(es) to pass to the input element.
-     */
-    className?: ClassName;
-    /**
-     * The content for error validation message. Controls the value of aria-invalid attribute.
-     */
-    error?: ReactNode;
-    /**
-     * Help text to show below the field.
-     */
-    help?: ReactNode;
-    /**
-     * Optional class(es) to pass to the help text element.
-     */
-    helpClassName?: ReactNode;
-    /**
-     * The id of the input.
-     */
-    id?: string;
-    /**
-     * The label for the field.
-     */
-    label?: ReactNode;
-    /**
-     * Optional class(es) to pass to the label component.
-     */
-    labelClassName?: string;
-    /**
-     * Whether the field is required.
-     */
-    required?: boolean;
-    /**
-     * Whether the form field should have a stacked appearance.
-     */
-    stacked?: boolean;
-    /**
-     * The content for success validation.
-     */
-    success?: ReactNode;
-    /**
-     * Whether to focus on the input on initial render.
-     */
-    takeFocus?: boolean;
-    /**
-     * Delay takeFocus in milliseconds i.e. to let animations finish
-     */
-    takeFocusDelay?: number;
-    /**
-     * Optional class(es) to pass to the wrapping Field component
-     */
-    wrapperClassName?: string;
-}, InputHTMLAttributes<HTMLInputElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Input](https://docs.vanillaframework.io/base/forms/#input).
- *
- * An input field where the user can enter data, which can vary in many ways, depending on the type attribute.
- */
-declare const Input: ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: Props) => JSX.Element;
-export default Input;