@ilo-org/react 0.7.7 → 0.8.0

package/lib/esm/components/Form/Form.js

@@ -1,64 +1,17 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { createElement } from 'react';
-import classNames from 'classnames';
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import Button from '../Button/Button.js';
-import FormGroup from '../FormGroup/FormGroup.js';
-import Checkbox from '../Checkbox/Checkbox.js';
-import ChoiceGroup from '../ChoiceGroup/ChoiceGroup.js';
-import DatePicker from '../DatePicker/DatePicker.js';
-import Dropdown from '../Dropdown/Dropdown.js';
-import FileUpload from '../FileUpload/FileUpload.js';
-import Input from '../Input/Input.js';
-import NumberPicker from '../NumberPicker/NumberPicker.js';
-import Textarea from '../Textarea/Textarea.js';
-import 'tslib';
+import classNames from 'classnames';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../Link/Link.js';
-import '../Icon/Icon.js';
-import '@ilo-org/icons-react';
-import '../Fieldset/Fieldset.js';
-import '../Tooltip/Tooltip.js';
-import 'react-dom';
-import '../FormElement/FormElement.js';
-import '../Radio/Radio.js';
 
-const Form = ({ action, className, formid, items, submitlabel, }) => {
+const Form = forwardRef((_a, ref) => {
+    var { children, theme = "light" } = _a, props = __rest(_a, ["children", "theme"]);
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--form`;
-    const formClasses = classNames(className, {
-        [baseClass]: true,
-    });
-    return (jsxs("form", Object.assign({ className: formClasses, id: formid, action: action }, { children: [items.map((item, i) => {
-                if ((item === null || item === void 0 ? void 0 : item.type) === "input") {
-                    return createElement(Input, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "dropdown") {
-                    return createElement(Dropdown, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "checkbox" && Array.isArray(item === null || item === void 0 ? void 0 : item.field) === false) {
-                    return createElement(Checkbox, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if (((item === null || item === void 0 ? void 0 : item.type) === "checkbox" || (item === null || item === void 0 ? void 0 : item.type) === "radio") &&
-                    Array.isArray(item === null || item === void 0 ? void 0 : item.field)) {
-                    return (jsx(ChoiceGroup, { items: item === null || item === void 0 ? void 0 : item.field, legend: item === null || item === void 0 ? void 0 : item.legend, choicegroupid: item === null || item === void 0 ? void 0 : item.choicegroupid, grouperror: item === null || item === void 0 ? void 0 : item.grouperror, grouphelper: item === null || item === void 0 ? void 0 : item.grouphelper, grouptooltip: item === null || item === void 0 ? void 0 : item.grouptooltip }, i));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "file") {
-                    return createElement(FileUpload, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "date") {
-                    return createElement(DatePicker, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "number") {
-                    return createElement(NumberPicker, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "textarea") {
-                    return createElement(Textarea, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-                if ((item === null || item === void 0 ? void 0 : item.type) === "formgroup") {
-                    return createElement(FormGroup, Object.assign({}, item === null || item === void 0 ? void 0 : item.field, { key: i }));
-                }
-            }), jsx(Button, { kind: "submit", label: submitlabel, size: "large", type: "primary" })] })));
-};
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const formClasses = classNames(baseClass, themeClass);
+    return (jsx("form", Object.assign({ ref: ref, className: formClasses }, props, { children: children })));
+});
 
 export { Form as default };

package/lib/esm/components/Form/index.js

@@ -1,25 +1,18 @@
 export { default as Form } from './Form.js';
+import 'tslib';
 import 'react/jsx-runtime';
 import 'react';
-import 'classnames';
 import '../../hooks/useGlobalSettings.js';
-import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../Button/Button.js';
-import '../Link/Link.js';
-import '../Icon/Icon.js';
-import '@ilo-org/icons-react';
-import '../FormGroup/FormGroup.js';
-import '../Checkbox/Checkbox.js';
-import '../Fieldset/Fieldset.js';
-import '../Tooltip/Tooltip.js';
-import 'react-dom';
-import '../FormElement/FormElement.js';
-import '../ChoiceGroup/ChoiceGroup.js';
-import '../Radio/Radio.js';
-import '../DatePicker/DatePicker.js';
-import '../Dropdown/Dropdown.js';
-import '../FileUpload/FileUpload.js';
-import '../Input/Input.js';
-import '../NumberPicker/NumberPicker.js';
-import '../Textarea/Textarea.js';
+import 'classnames';
+
+const basic = {
+    theme: "light",
+};
+
+var Form_args = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  basic: basic
+});
+
+export { Form_args as FormArgs };

package/lib/esm/components/FormControl/FormControl.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { nanoid } from 'nanoid';
+import { createContext, useContext, useMemo, useState, useEffect } from 'react';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import Tooltip from '../Tooltip/Tooltip.js';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+import 'react-dom';
+
+// Calculates unique IDs for the internal accessibility elements
+// TODO: When we upgrade to React 8, this should use useId instead
+function getA11yFields(baseClass = "", { tooltip, helper, errorMessage } = {}) {
+    return {
+        tooltipId: tooltip && `${baseClass}--tooltip--${nanoid()}`,
+        helperId: helper && `${baseClass}--helper--${nanoid()}`,
+        errorId: errorMessage && `${baseClass}--error--${nanoid()}`,
+    };
+}
+// Calculates the aria-describedby attribute value based on whether or not there's an error
+function getAriaDescribedBy(getAllyFields, hasError) {
+    const { tooltipId, helperId, errorId } = getAllyFields;
+    const ariaDescribedBy = classNames(tooltipId, {
+        [`${helperId}`]: !hasError,
+        [`${errorId}`]: hasError,
+    });
+    // For some reason, classnames seems to return "undefined" as a string sometimes
+    if (!ariaDescribedBy || ariaDescribedBy === "undefined") {
+        return undefined;
+    }
+    return ariaDescribedBy;
+}
+// The context passed down to form elements wrapped by the form control
+const FormControlContext = createContext({});
+// Hook to get the context value
+const useFormControl = () => useContext(FormControlContext);
+const FormControl = ({ children, className, label, helper, errorMessage, tooltip, style, error, disabled, fieldId, labelSize = "medium", labelPlacement = "top", }) => {
+    const { prefix } = useGlobalSettings();
+    // Classes applied to the outer container
+    const baseClass = `${prefix}--form-control`;
+    // The ids of the tooltip, helper, and error only get calculated on first render
+    const a11yFields = useMemo(() => getA11yFields(baseClass, { helper, errorMessage, tooltip }), [baseClass, helper, errorMessage, tooltip]);
+    // The ids of the tooltip, helper, and error
+    const { tooltipId, helperId, errorId } = a11yFields;
+    // The aria-describedby attribute value
+    const [ariaDescribedBy, setAriaDescribedBy] = useState(undefined);
+    // Update the aria-describedby attribute value when the error changes
+    useEffect(() => {
+        setAriaDescribedBy(getAriaDescribedBy({ tooltipId, helperId, errorId }, error));
+    }, [tooltipId, helperId, errorId, error]);
+    // The context passed down to form elements wrapped by the form control
+    const contextValue = {
+        ariaDescribedBy,
+    };
+    // Classes applied to the outer container
+    const errorClass = `${baseClass}__error`;
+    const disabledClass = `${baseClass}__disabled`;
+    const labelPlacementClass = `${baseClass}__label-placement__${labelPlacement}`;
+    const formControlClass = classNames(baseClass, className, labelPlacementClass, [{ [errorClass]: error }, { [disabledClass]: disabled }]);
+    // Classes applies to the label
+    const labelBaseClass = `${baseClass}--label`;
+    const labelSizeClass = `${labelBaseClass}__size__${labelSize}`;
+    const labelClass = classNames(labelBaseClass, labelSizeClass);
+    // Helper class
+    const helperClass = `${baseClass}--helper`;
+    // Show the error message if there is an error and an error message
+    const showError = !!error && !!errorMessage;
+    // Show the helper text if there is no error and a helper text
+    const showHelper = !showError && !!helper;
+    return (jsx(FormControlContext.Provider, Object.assign({ value: contextValue }, { children: jsxs("div", Object.assign({ className: formControlClass, style: style }, { children: [jsxs("span", Object.assign({ className: labelClass }, { children: [jsx("label", Object.assign({ htmlFor: fieldId }, { children: label })), tooltip && (jsx(Tooltip, { id: tooltipId, className: `${baseClass}--legend--tooltip`, icon: true, label: tooltip, theme: "dark" }))] })), children, showHelper && (jsx("span", Object.assign({ id: helperId, className: helperClass }, { children: helper }))), showError && (jsx("span", Object.assign({ id: errorId, className: helperClass, "aria-live": "assertive" }, { children: errorMessage })))] })) })));
+};
+
+export { FormControlContext, FormControl as default, useFormControl };

package/lib/esm/components/{ChoiceGroup → FormControl}/index.js

@@ -1,13 +1,10 @@
-export { default as ChoiceGroup } from './ChoiceGroup.js';
+export { default as FormControl } from './FormControl.js';
 import 'react/jsx-runtime';
-import 'react';
-import '../Checkbox/Checkbox.js';
 import 'classnames';
+import 'nanoid';
+import 'react';
 import '../../hooks/useGlobalSettings.js';
 import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
-import '../FormElement/FormElement.js';
-import '../Radio/Radio.js';

package/lib/esm/components/NumberPicker/NumberPicker.js

@@ -1,30 +1,35 @@
+import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
+import require$$0 from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import Fieldset from '../Fieldset/Fieldset.js';
-import FormElement from '../FormElement/FormElement.js';
-import 'tslib';
-import 'react';
+import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import '../../GlobalCtx-7fb23cfa.js';
+import 'nanoid';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
 
-const NumberPicker = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, }) => {
+const NumberPicker = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, placeholder, required, }, ref) => {
     const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
+    const inputClass = `${prefix}--input`;
     const baseClass = `${prefix}--numberpicker`;
-    const NumberPickerClasses = classNames("", {
-        [baseClass]: true,
-        [`error`]: error,
+    const hasError = !disabled && !!error;
+    const numberPickerClasses = classNames(inputClass, baseClass, {
+        error: hasError,
     });
-    /**
-     * On change, if there is a callback, call it
-     */
     const handleChange = (e) => {
-        if (callback) {
-            callback(e);
+        if (onChange) {
+            onChange(e);
         }
     };
-    return (jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "text" }, { children: jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: "text", className: `${NumberPickerClasses} ${prefix}--input`, pattern: "[0-9]*", inputMode: "numeric" }) })) }));
-};
+    return (jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, placeholder: placeholder, required: required, type: "number", className: numberPickerClasses, pattern: "[0-9]*", inputMode: "numeric", "aria-describedby": ariaDescribedBy }));
+});
+const LabelledNumberPicker = require$$0.forwardRef((props, ref) => {
+    const { style, inputStyle, className } = props, rest = __rest(props, ["style", "inputStyle", "className"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsx(FormControl, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsx(NumberPicker, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-export { NumberPicker as default };
+export { LabelledNumberPicker as default };

package/lib/esm/components/NumberPicker/index.js

@@ -1,11 +1,11 @@
 export { default as NumberPicker } from './NumberPicker.js';
+import 'tslib';
 import 'react/jsx-runtime';
+import 'react';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../Fieldset/Fieldset.js';
+import '../FormControl/FormControl.js';
+import 'nanoid';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
-import '../FormElement/FormElement.js';

package/lib/esm/components/Radio/Radio.js

@@ -1,27 +1,44 @@
+import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
+import require$$0, { useEffect } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import FormElement from '../FormElement/FormElement.js';
-import 'tslib';
-import 'react';
+import { useFieldsetError } from '../Fieldset/Fieldset.js';
+import FormControl, { useFormControl } from '../FormControl/FormControl.js';
+import { usePrevious } from '../../hooks/usePrevious.js';
 import '../../GlobalCtx-7fb23cfa.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+import 'nanoid';
 
-const Radio = ({ callback, disabled = false, error, helper, id, label, name, required, selected, tooltip, value, }) => {
+const Radio = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, required, checked, defaultChecked = false, value, }, ref) => {
     const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--radio`;
-    const RadioClasses = classNames("", {
-        [baseClass]: true,
-        [`error`]: error,
-    });
-    /**
-     * On change, if there is a callback, call it
-     */
+    const { setHasError } = useFieldsetError();
+    const formControlCtx = useFormControl();
+    const prevError = usePrevious(error);
+    useEffect(() => {
+        if (error !== prevError) {
+            setHasError(!!error);
+        }
+    }, [error, prevError, setHasError]);
+    const { ariaDescribedBy } = formControlCtx;
     const handleChange = (e) => {
-        if (callback) {
-            callback(e);
+        console.log(e.target.value);
+        if (onChange) {
+            onChange(e);
         }
     };
-    return (jsx(FormElement, Object.assign({ elemid: id, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsx("input", { id: id, name: name, onChange: handleChange, disabled: disabled, required: required, type: "radio", className: RadioClasses, checked: selected === value, value: value }) })));
-};
+    const baseClass = `${prefix}--radio`;
+    const errorClass = `${baseClass}__error`;
+    const RadioClasses = classNames(baseClass, {
+        [errorClass]: error,
+    });
+    return (jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, required: required, type: "radio", className: RadioClasses, defaultChecked: defaultChecked, "aria-describedby": ariaDescribedBy, checked: checked, value: value }));
+});
+const LabelledRadio = require$$0.forwardRef((props, ref) => {
+    const { style, inputStyle, className, labelPlacement = "end", labelSize = "small" } = props, rest = __rest(props, ["style", "inputStyle", "className", "labelPlacement", "labelSize"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsx(FormControl, Object.assign({ fieldId: fieldId, style: style, className: className, labelPlacement: labelPlacement, labelSize: labelSize }, rest, { children: jsx(Radio, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-export { Radio as default };
+export { LabelledRadio as default };

package/lib/esm/components/Radio/index.js

@@ -1,8 +1,26 @@
 export { default as Radio } from './Radio.js';
+import 'tslib';
 import 'react/jsx-runtime';
+import 'react';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../FormElement/FormElement.js';
+import '../Fieldset/Fieldset.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+import '../FormControl/FormControl.js';
+import 'nanoid';
+import '../../hooks/usePrevious.js';
+
+const basic = {
+    className: "Radio",
+    name: "radio",
+};
+/**
+ * Sample prop definitions Radio's enumerable properties (imported in stories and test)
+ */
+const RadioArgs = {
+    basic,
+};
+
+export { RadioArgs };

package/lib/esm/components/TextInput/TextInput.js

@@ -0,0 +1,28 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import require$$0 from 'react';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import FormControl, { useFormControl } from '../FormControl/FormControl.js';
+import '../../GlobalCtx-7fb23cfa.js';
+import 'nanoid';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+
+const TextInput = require$$0.forwardRef(({ onChange, onBlur, error, id, name, placeholder, required, pattern, disabled = false, type = "text", }, ref) => {
+    const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
+    const baseClass = `${prefix}--text-input`;
+    const inputClass = classNames(baseClass, {
+        [`${baseClass}__error`]: error,
+    });
+    return (jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: onChange, onBlur: onBlur, disabled: disabled, placeholder: placeholder, required: required, type: type, className: inputClass, pattern: pattern, "aria-describedby": ariaDescribedBy }));
+});
+const LabelledTextInput = require$$0.forwardRef((props, ref) => {
+    const { style, inputStyle, className } = props, rest = __rest(props, ["style", "inputStyle", "className"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsx(FormControl, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsx(TextInput, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
+
+export { LabelledTextInput as default };

package/lib/esm/components/TextInput/index.js

@@ -0,0 +1,49 @@
+export { default as TextInput } from './TextInput.js';
+import 'tslib';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../FormControl/FormControl.js';
+import 'nanoid';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+
+const basic = {
+    disabled: false,
+    errorMessage: "This is an error message",
+    error: false,
+    style: { width: "100%" },
+    id: "text-input",
+    label: "Insert your name here",
+    labelPlacement: "top",
+    labelSize: "medium",
+    name: "text",
+    placeholder: "This is a text field",
+    required: false,
+    type: "text",
+};
+const isdisabled = Object.assign(Object.assign({}, basic), { disabled: true, placeholder: "Disabled Text Field" });
+const hashelper = Object.assign(Object.assign({}, basic), { placeholder: "This has a helper text" });
+const haserror = Object.assign(Object.assign({}, basic), { placeholder: "This has an error", error: true });
+const hastooltip = Object.assign(Object.assign({}, basic), { placeholder: "This has an tooltip", tooltip: "This is a tooltip" });
+const email = Object.assign(Object.assign({}, basic), { label: "Enter your email address", placeholder: "my@email.com", type: "email", id: "email-input" });
+const password = Object.assign(Object.assign({}, basic), { label: "Enter your password", placeholder: "Must be 8 digits long", type: "password", id: "password-input" });
+const telephone = Object.assign(Object.assign({}, basic), { name: "tel", label: "Enter your telephone number", placeholder: "###-###-####", required: false, type: "tel", pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}" });
+const url = Object.assign(Object.assign({}, basic), { label: "Enter website address", id: "url-input", name: "url", placeholder: "https://www.example.com", required: false, type: "url" });
+
+var TextInput_args = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  basic: basic,
+  email: email,
+  haserror: haserror,
+  hashelper: hashelper,
+  hastooltip: hastooltip,
+  isdisabled: isdisabled,
+  password: password,
+  telephone: telephone,
+  url: url
+});
+
+export { TextInput_args as TextInputArgs };

package/lib/esm/components/Textarea/Textarea.js

@@ -1,30 +1,30 @@
+import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
+import require$$0 from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import Fieldset from '../Fieldset/Fieldset.js';
-import FormElement from '../FormElement/FormElement.js';
-import 'tslib';
-import 'react';
+import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import '../../GlobalCtx-7fb23cfa.js';
+import 'nanoid';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
 
-const Textarea = ({ callback, disabled = false, error, helper, id, label, maxlength, minlength, name, placeholder, required, spellcheck, tooltip, }) => {
+const Textarea = require$$0.forwardRef((_a, ref) => {
+    var { error, className, name, id } = _a, props = __rest(_a, ["error", "className", "name", "id"]);
     const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
     const baseClass = `${prefix}--textarea`;
-    const TextareaClasses = classNames("", {
-        [baseClass]: true,
-        [`error`]: error,
+    const errorClass = `${baseClass}__error`;
+    const textAreaClass = classNames(baseClass, className, {
+        [errorClass]: error,
     });
-    /**
-     * On change, if there is a callback, call it
-     */
-    const handleChange = (e) => {
-        if (callback) {
-            callback(e);
-        }
-    };
-    return (jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsx("textarea", { id: id, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, className: TextareaClasses, maxLength: maxlength, minLength: minlength, spellCheck: spellcheck }) })) }));
-};
+    return (jsx("textarea", Object.assign({ ref: ref, className: textAreaClass, name: name, id: id ? id : name, "aria-describedby": ariaDescribedBy }, props)));
+});
+const LabelledTextarea = require$$0.forwardRef((props, ref) => {
+    const { style, inputStyle, className } = props, rest = __rest(props, ["style", "inputStyle", "className"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsx(FormControl, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsx(Textarea, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-export { Textarea as default };
+export { LabelledTextarea as default };

package/lib/esm/components/Textarea/index.js

@@ -1,11 +1,35 @@
 export { default as Textarea } from './Textarea.js';
+import 'tslib';
 import 'react/jsx-runtime';
+import 'react';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../Fieldset/Fieldset.js';
+import '../FormControl/FormControl.js';
+import 'nanoid';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
-import '../FormElement/FormElement.js';
+
+const placeholder = "It was a cold day in April and the clocks were striking thirteen....";
+const basic = {
+    id: "textarea",
+    disabled: false,
+    name: "textarea",
+    placeholder,
+    required: false,
+    spellcheck: false,
+    label: "Insert your life story here",
+    labelPlacement: "top",
+    labelSize: "medium",
+    style: { width: "100%" },
+    errorMessage: "This is an error message",
+};
+const haserror = Object.assign(Object.assign({}, basic), { error: true });
+const disabled = Object.assign(Object.assign({}, basic), { disabled: true });
+var Textarea_args = {
+    basic,
+    haserror,
+    disabled,
+};
+
+export { Textarea_args as TextareaArgs };

package/lib/esm/components/Toggle/Toggle.js

@@ -0,0 +1,31 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import classNames from 'classnames';
+import FormControl, { useFormControl } from '../FormControl/FormControl.js';
+import '../../GlobalCtx-7fb23cfa.js';
+import 'nanoid';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+
+const Toggle = forwardRef(({ size = "medium", error = false, disabled = false, defaultChecked = false, required = false, id, name, onChange, onBlur, onClick, checked, className, }, ref) => {
+    const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
+    const hasError = !disabled && !!error;
+    const baseClass = `${prefix}--input--toggle`;
+    const sliderClass = `${baseClass}--slider`;
+    const toggleClass = classNames(baseClass, className, `${baseClass}__size__${size}`, [
+        { [`${baseClass}__error`]: hasError },
+        { [`${baseClass}__disabled`]: disabled },
+    ]);
+    return (jsxs("div", Object.assign({ className: toggleClass }, { children: [jsx("input", { ref: ref, checked: checked, disabled: disabled, defaultChecked: defaultChecked, name: name, id: id ? id : name, type: "checkbox", role: "switch", required: required, onChange: onChange, onBlur: onBlur, onClick: onClick, "aria-describedby": ariaDescribedBy }), jsx("span", { className: sliderClass })] })));
+});
+const LabelledToggle = forwardRef((props, ref) => {
+    const fieldId = props.id ? props.id : props.name;
+    const { style, inputStyle, className } = props, rest = __rest(props, ["style", "inputStyle", "className"]);
+    return (jsx(FormControl, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsx(Toggle, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
+
+export { LabelledToggle as default };

package/lib/esm/components/Toggle/index.js

@@ -0,0 +1,48 @@
+export { default as Toggle } from './Toggle.js';
+import 'tslib';
+import 'react/jsx-runtime';
+import 'react';
+import '../../hooks/useGlobalSettings.js';
+import '../../GlobalCtx-7fb23cfa.js';
+import 'classnames';
+import '../FormControl/FormControl.js';
+import 'nanoid';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+
+const Default = {
+    defaultChecked: false,
+    errorMessage: "Invalid option",
+    name: "my-toggle",
+    size: "medium",
+    label: "Show details",
+    labelPlacement: "end",
+    labelSize: "small",
+};
+const Checked = Object.assign(Object.assign({}, Default), { defaultChecked: true });
+const Disabled = Object.assign(Object.assign({}, Default), { disabled: true });
+const Helper = Object.assign(Object.assign({}, Default), { helper: "This is a helper text" });
+const Tooltip = Object.assign(Object.assign({}, Helper), { tooltip: "This is a tooltip" });
+const Error = Object.assign(Object.assign({}, Default), { error: true });
+const DefaultChecked = Object.assign(Object.assign({}, Default), { defaultChecked: true });
+const Controlled = Object.assign(Object.assign({}, Default), { onClick: () => console.log("clicked"), checked: true });
+const Large = Object.assign(Object.assign({}, Default), { size: "large" });
+const Medium = Object.assign(Object.assign({}, Default), { size: "medium" });
+const Small = Object.assign(Object.assign({}, Default), { size: "small" });
+
+var Toggle_args = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Checked: Checked,
+  Controlled: Controlled,
+  Default: Default,
+  DefaultChecked: DefaultChecked,
+  Disabled: Disabled,
+  Error: Error,
+  Helper: Helper,
+  Large: Large,
+  Medium: Medium,
+  Small: Small,
+  Tooltip: Tooltip
+});
+
+export { Toggle_args as ToggleArgs };

package/lib/esm/components/Tooltip/Tooltip.js

@@ -6,7 +6,7 @@ import ReactDOM from 'react-dom';
 import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
 
-const Tooltip = ({ className, children, icon, label, theme, }) => {
+const Tooltip = ({ className, children, icon, label, theme, id, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--tooltip`;
     const [isVisible, setIsVisible] = useState(false);
@@ -95,7 +95,7 @@ const Tooltip = ({ className, children, icon, label, theme, }) => {
         left: position.x + "px",
         top: position.y + "px",
     };
-    return (jsxs("div", Object.assign({ className: `${baseClass}--wrapper ${icon && "has-icon"}`, onMouseOver: handleOnMouseOver, onFocus: handleOnMouseOver, onMouseOut: handleOnMouseOut, onBlur: handleOnMouseOut }, { children: [!icon && jsx(Fragment, { children: children }), jsxs("span", Object.assign({ className: tooltipClasses, style: style, ref: tooltipRef }, { children: [jsx("span", { className: tooltipArrowClasses, role: "presentation" }), label] }))] })));
+    return (jsxs("div", Object.assign({ className: `${baseClass}--wrapper ${icon && "has-icon"}`, onMouseOver: handleOnMouseOver, onFocus: handleOnMouseOver, onMouseOut: handleOnMouseOut, onBlur: handleOnMouseOut, id: id }, { children: [!icon && jsx(Fragment, { children: children }), jsxs("span", Object.assign({ className: tooltipClasses, style: style, ref: tooltipRef }, { children: [jsx("span", { className: tooltipArrowClasses, role: "presentation" }), label] }))] })));
 };
 
 export { Tooltip as default };