@ilo-org/react 0.7.8 → 0.8.1

package/lib/cjs/components/FormControl/FormControl.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var nanoid = require('nanoid');
+var require$$0 = require('react');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Tooltip_Tooltip = require('../Tooltip/Tooltip.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('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.nanoid()}`,
+        helperId: helper && `${baseClass}--helper--${nanoid.nanoid()}`,
+        errorId: errorMessage && `${baseClass}--error--${nanoid.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 = require$$0.createContext({});
+// Hook to get the context value
+const useFormControl = () => require$$0.useContext(FormControlContext);
+const FormControl = ({ children, className, label, helper, errorMessage, tooltip, style, error, disabled, fieldId, labelSize = "medium", labelPlacement = "top", }) => {
+    const { prefix } = hooks_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 = require$$0.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] = require$$0.useState(undefined);
+    // Update the aria-describedby attribute value when the error changes
+    require$$0.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 (jsxRuntime.jsx(FormControlContext.Provider, Object.assign({ value: contextValue }, { children: jsxRuntime.jsxs("div", Object.assign({ className: formControlClass, style: style }, { children: [jsxRuntime.jsxs("span", Object.assign({ className: labelClass }, { children: [jsxRuntime.jsx("label", Object.assign({ htmlFor: fieldId }, { children: label })), tooltip && (jsxRuntime.jsx(components_Tooltip_Tooltip, { id: tooltipId, className: `${baseClass}--legend--tooltip`, icon: true, label: tooltip, theme: "dark" }))] })), children, showHelper && (jsxRuntime.jsx("span", Object.assign({ id: helperId, className: helperClass }, { children: helper }))), showError && (jsxRuntime.jsx("span", Object.assign({ id: errorId, className: helperClass, "aria-live": "assertive" }, { children: errorMessage })))] })) })));
+};
+
+exports.FormControlContext = FormControlContext;
+exports.default = FormControl;
+exports.useFormControl = useFormControl;

package/lib/cjs/components/FormControl/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var components_FormControl_FormControl = require('./FormControl.js');
+require('react/jsx-runtime');
+require('classnames');
+require('nanoid');
+require('react');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+
+
+
+exports.FormControl = components_FormControl_FormControl.default;

package/lib/cjs/components/Input/Input.js

@@ -26,7 +26,7 @@ const Input = ({ callback, disabled = false, error, helper, id, label, name, pla
             callback(e);
         }
     };
-    return (jsxRuntime.jsx(components_Fieldset_Fieldset, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: type, className: InputClasses }) })) }));
+    return (jsxRuntime.jsx(components_Fieldset_Fieldset.default, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: type, className: InputClasses }) })) }));
 };
 
 module.exports = Input;

package/lib/cjs/components/NumberPicker/NumberPicker.js

@@ -1,32 +1,37 @@
 'use strict';
 
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
-var components_FormElement_FormElement = require('../FormElement/FormElement.js');
-require('tslib');
-require('react');
+var components_FormControl_FormControl = require('../FormControl/FormControl.js');
 require('../../GlobalCtx-97e4b433.js');
+require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('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 } = hooks_useGlobalSettings();
+    const formControlCtx = components_FormControl_FormControl.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 (jsxRuntime.jsx(components_Fieldset_Fieldset, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "text" }, { children: jsxRuntime.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 (jsxRuntime.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 = tslib.__rest(props, ["style", "inputStyle", "className"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsxRuntime.jsx(NumberPicker, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-module.exports = NumberPicker;
+module.exports = LabelledNumberPicker;

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

@@ -1,16 +1,16 @@
 'use strict';
 
 var components_NumberPicker_NumberPicker = require('./NumberPicker.js');
+require('tslib');
 require('react/jsx-runtime');
+require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
 require('../../GlobalCtx-97e4b433.js');
-require('../Fieldset/Fieldset.js');
+require('../FormControl/FormControl.js');
+require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('react-dom');
-require('../FormElement/FormElement.js');
 
 
 

package/lib/cjs/components/Radio/Radio.js

@@ -1,29 +1,46 @@
 'use strict';
 
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_FormElement_FormElement = require('../FormElement/FormElement.js');
-require('tslib');
-require('react');
+var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
+var components_FormControl_FormControl = require('../FormControl/FormControl.js');
+var hooks_usePrevious = require('../../hooks/usePrevious.js');
 require('../../GlobalCtx-97e4b433.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+require('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 } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--radio`;
-    const RadioClasses = classNames("", {
-        [baseClass]: true,
-        [`error`]: error,
-    });
-    /**
-     * On change, if there is a callback, call it
-     */
+    const { setHasError } = components_Fieldset_Fieldset.useFieldsetError();
+    const formControlCtx = components_FormControl_FormControl.useFormControl();
+    const prevError = hooks_usePrevious.usePrevious(error);
+    require$$0.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 (jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: id, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.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 (jsxRuntime.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 = tslib.__rest(props, ["style", "inputStyle", "className", "labelPlacement", "labelSize"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className, labelPlacement: labelPlacement, labelSize: labelSize }, rest, { children: jsxRuntime.jsx(Radio, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-module.exports = Radio;
+module.exports = LabelledRadio;

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

@@ -1,14 +1,29 @@
 'use strict';
 
 var components_Radio_Radio = require('./Radio.js');
+require('tslib');
 require('react/jsx-runtime');
+require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
 require('../../GlobalCtx-97e4b433.js');
-require('../FormElement/FormElement.js');
-
+require('../Fieldset/Fieldset.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+require('../FormControl/FormControl.js');
+require('nanoid');
+require('../../hooks/usePrevious.js');
 
+const basic = {
+    className: "Radio",
+    name: "radio",
+};
+/**
+ * Sample prop definitions Radio's enumerable properties (imported in stories and test)
+ */
+const RadioArgs = {
+    basic,
+};
 
 exports.Radio = components_Radio_Radio;
+exports.RadioArgs = RadioArgs;

package/lib/cjs/components/TextInput/TextInput.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_FormControl_FormControl = require('../FormControl/FormControl.js');
+require('../../GlobalCtx-97e4b433.js');
+require('nanoid');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+
+const TextInput = require$$0.forwardRef(({ onChange, onBlur, error, id, name, placeholder, required, pattern, disabled = false, type = "text", }, ref) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const formControlCtx = components_FormControl_FormControl.useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
+    const baseClass = `${prefix}--text-input`;
+    const inputClass = classNames(baseClass, {
+        [`${baseClass}__error`]: error,
+    });
+    return (jsxRuntime.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 = tslib.__rest(props, ["style", "inputStyle", "className"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsxRuntime.jsx(TextInput, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
+
+module.exports = LabelledTextInput;

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

@@ -0,0 +1,52 @@
+'use strict';
+
+var components_TextInput_TextInput = require('./TextInput.js');
+require('tslib');
+require('react/jsx-runtime');
+require('react');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('../../GlobalCtx-97e4b433.js');
+require('../FormControl/FormControl.js');
+require('nanoid');
+require('../Tooltip/Tooltip.js');
+require('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
+});
+
+exports.TextInput = components_TextInput_TextInput;
+exports.TextInputArgs = TextInput_args;

package/lib/cjs/components/Textarea/Textarea.js

@@ -1,32 +1,32 @@
 'use strict';
 
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
-var components_FormElement_FormElement = require('../FormElement/FormElement.js');
-require('tslib');
-require('react');
+var components_FormControl_FormControl = require('../FormControl/FormControl.js');
 require('../../GlobalCtx-97e4b433.js');
+require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('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 = tslib.__rest(_a, ["error", "className", "name", "id"]);
     const { prefix } = hooks_useGlobalSettings();
+    const formControlCtx = components_FormControl_FormControl.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 (jsxRuntime.jsx(components_Fieldset_Fieldset, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.jsx("textarea", { id: id, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, className: TextareaClasses, maxLength: maxlength, minLength: minlength, spellCheck: spellcheck }) })) }));
-};
+    return (jsxRuntime.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 = tslib.__rest(props, ["style", "inputStyle", "className"]);
+    const fieldId = props.id ? props.id : props.name;
+    return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsxRuntime.jsx(Textarea, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
 
-module.exports = Textarea;
+module.exports = LabelledTextarea;

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

@@ -1,17 +1,38 @@
 'use strict';
 
 var components_Textarea_Textarea = require('./Textarea.js');
+require('tslib');
 require('react/jsx-runtime');
+require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
 require('../../GlobalCtx-97e4b433.js');
-require('../Fieldset/Fieldset.js');
+require('../FormControl/FormControl.js');
+require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('react-dom');
-require('../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,
+};
 
 exports.Textarea = components_Textarea_Textarea;
+exports.TextareaArgs = Textarea_args;

package/lib/cjs/components/Toggle/Toggle.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var classNames = require('classnames');
+var components_FormControl_FormControl = require('../FormControl/FormControl.js');
+require('../../GlobalCtx-97e4b433.js');
+require('nanoid');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+
+const Toggle = require$$0.forwardRef(({ size = "medium", error = false, disabled = false, defaultChecked = false, required = false, id, name, onChange, onBlur, onClick, checked, className, }, ref) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const formControlCtx = components_FormControl_FormControl.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 (jsxRuntime.jsxs("div", Object.assign({ className: toggleClass }, { children: [jsxRuntime.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 }), jsxRuntime.jsx("span", { className: sliderClass })] })));
+});
+const LabelledToggle = require$$0.forwardRef((props, ref) => {
+    const fieldId = props.id ? props.id : props.name;
+    const { style, inputStyle, className } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className"]);
+    return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsxRuntime.jsx(Toggle, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
+});
+
+module.exports = LabelledToggle;

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

@@ -0,0 +1,51 @@
+'use strict';
+
+var components_Toggle_Toggle = require('./Toggle.js');
+require('tslib');
+require('react/jsx-runtime');
+require('react');
+require('../../hooks/useGlobalSettings.js');
+require('../../GlobalCtx-97e4b433.js');
+require('classnames');
+require('../FormControl/FormControl.js');
+require('nanoid');
+require('../Tooltip/Tooltip.js');
+require('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
+});
+
+exports.Toggle = components_Toggle_Toggle;
+exports.ToggleArgs = Toggle_args;

package/lib/cjs/components/Tooltip/Tooltip.js

@@ -8,7 +8,7 @@ var ReactDOM = require('react-dom');
 require('tslib');
 require('../../GlobalCtx-97e4b433.js');
 
-const Tooltip = ({ className, children, icon, label, theme, }) => {
+const Tooltip = ({ className, children, icon, label, theme, id, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--tooltip`;
     const [isVisible, setIsVisible] = require$$0.useState(false);
@@ -97,7 +97,7 @@ const Tooltip = ({ className, children, icon, label, theme, }) => {
         left: position.x + "px",
         top: position.y + "px",
     };
-    return (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrapper ${icon && "has-icon"}`, onMouseOver: handleOnMouseOver, onFocus: handleOnMouseOver, onMouseOut: handleOnMouseOut, onBlur: handleOnMouseOut }, { children: [!icon && jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), jsxRuntime.jsxs("span", Object.assign({ className: tooltipClasses, style: style, ref: tooltipRef }, { children: [jsxRuntime.jsx("span", { className: tooltipArrowClasses, role: "presentation" }), label] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrapper ${icon && "has-icon"}`, onMouseOver: handleOnMouseOver, onFocus: handleOnMouseOver, onMouseOut: handleOnMouseOut, onBlur: handleOnMouseOut, id: id }, { children: [!icon && jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), jsxRuntime.jsxs("span", Object.assign({ className: tooltipClasses, style: style, ref: tooltipRef }, { children: [jsxRuntime.jsx("span", { className: tooltipArrowClasses, role: "presentation" }), label] }))] })));
 };
 
 module.exports = Tooltip;