@ilo-org/react 0.0.18 → 0.1.0

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

@@ -0,0 +1,12 @@
+export { default as Collapse } from './Collapse.js';
+import 'tslib';
+import 'react/jsx-runtime';
+import 'classnames';
+import 'react';
+import '../../index-8ebb2cc1.js';
+import 'react-dom';
+import '../../utils/createChainedFunction.js';
+import '../../utils/getDefaultDimensionValue.js';
+import '../../css-7414f50b.js';
+import '../../utils/transitionEndListener.js';
+import '../../utils/triggerBrowserReflow.js';

package/lib/esm/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const ContextMenu = ({ className, links }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--context-menu`;
+    const contextMenuClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    return (jsx("ul", Object.assign({ className: contextMenuClasses }, { children: links &&
+            links.map((link, i) => (jsx("li", Object.assign({ className: `${baseClass}--item ${link.endsection ? "endsection" : ""}` }, { children: jsx("a", Object.assign({ href: link.url, className: `${baseClass}--link` }, { children: jsx("span", Object.assign({ className: `${baseClass}--label` }, { children: link.label })) })) }), `${baseClass}--item-${i}`))) })));
+};
+
+export { ContextMenu as default };

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

@@ -0,0 +1,7 @@
+export { default as ContextMenu } from './ContextMenu.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';

package/lib/esm/components/Credit/Credit.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const Credit = ({ className, credit }) => {
+    const [showcredit, showCredit] = useState(false);
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--credit`;
+    const creditClasses = classNames(className, {
+        [baseClass]: true,
+        ["show"]: showcredit,
+    });
+    /**
+     * Show credit tooltip
+     */
+    const showCreditTip = () => {
+        showCredit(true);
+    };
+    /**
+     * Hide credit tooltip
+     */
+    const hideCreditTip = () => {
+        showCredit(false);
+    };
+    return (jsx("span", Object.assign({ className: creditClasses, onMouseEnter: showCreditTip, onMouseLeave: hideCreditTip }, { children: jsx("span", Object.assign({ className: `${baseClass}--label` }, { children: credit })) })));
+};
+
+export { Credit as default };

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

@@ -0,0 +1,7 @@
+export { default as Credit } from './Credit.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';

package/lib/esm/components/DatePicker/DatePicker.js

@@ -0,0 +1,30 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+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 '../../GlobalCtx-7fb23cfa.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+
+const DatePicker = ({ callback, disabled = false, enddata, error, helper, id, label, name, placeholder, range, required, tooltip, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--datepicker`;
+    const DatePickerClasses = classNames("", {
+        [baseClass]: true,
+        [`error`]: error,
+    });
+    /**
+     * On change, if there is a callback, call it
+     */
+    const handleChange = (e, picker) => {
+        if (callback) {
+            callback(e, picker);
+        }
+    };
+    return (jsxs(Fragment, { children: [!range && (jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsx("input", { id: `${id ? id : name}`, name: `${name}`, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: "date", className: `${DatePickerClasses} ${prefix}--input` }) })) })), range && (jsxs("div", Object.assign({ className: `${baseClass}--range` }, { children: [jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "date" }, { children: jsx("input", { id: `${id ? id : name}`, name: `${name}`, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: "date", className: `${DatePickerClasses} ${prefix}--input` }) })) }), jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: enddata === null || enddata === void 0 ? void 0 : enddata.name, label: enddata === null || enddata === void 0 ? void 0 : enddata.label, helper: enddata === null || enddata === void 0 ? void 0 : enddata.helper, error: enddata === null || enddata === void 0 ? void 0 : enddata.error, required: enddata === null || enddata === void 0 ? void 0 : enddata.required, tooltip: enddata === null || enddata === void 0 ? void 0 : enddata.tooltip, type: "date" }, { children: jsx("input", { id: (enddata === null || enddata === void 0 ? void 0 : enddata.id) ? enddata === null || enddata === void 0 ? void 0 : enddata.id : enddata === null || enddata === void 0 ? void 0 : enddata.name, name: enddata === null || enddata === void 0 ? void 0 : enddata.name, onChange: (e) => handleChange(e, "end"), disabled: enddata === null || enddata === void 0 ? void 0 : enddata.disabled, placeholder: enddata === null || enddata === void 0 ? void 0 : enddata.placeholder, required: enddata === null || enddata === void 0 ? void 0 : enddata.required, type: "date", className: `${DatePickerClasses} ${prefix}--input` }) })) })] })))] }));
+};
+
+export { DatePicker as default };

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

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

package/lib/esm/components/Dropdown/Dropdown.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } 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 '../../GlobalCtx-7fb23cfa.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+
+const Dropdown = ({ autocomplete, callback, disabled = false, error, helper, id, label, name, options, required, tooltip, value, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--dropdown`;
+    const dropdownClasses = classNames("", {
+        [baseClass]: true,
+        [`error`]: error,
+    });
+    const [currentvalue, setValue] = useState(value);
+    /**
+     * On change, if there is a callback, call it
+     */
+    const handleChange = (e) => {
+        setValue(e.target.value);
+        if (callback) {
+            callback(e);
+        }
+    };
+    return (jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "dropdown" }, { children: jsx("div", Object.assign({ className: `${baseClass}--wrapper` }, { children: jsx("select", Object.assign({ id: id ? id : name, autoComplete: autocomplete, name: name, required: required, onChange: handleChange, disabled: disabled, className: dropdownClasses, value: currentvalue }, { children: options &&
+                        options.map((option, i) => (jsx("option", { disabled: option.disabled, label: option.label, value: option.value }, `${baseClass}--option--${i}`))) })) })) })) }));
+};
+
+export { Dropdown as default };

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

@@ -0,0 +1,11 @@
+export { default as Dropdown } from './Dropdown.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+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';

package/lib/esm/components/Empty/Empty.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const Empty = ({ className, style }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--empty`;
+    const emptyClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    return jsx("div", { style: style, className: emptyClasses });
+};
+
+export { Empty as default };

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

@@ -0,0 +1,7 @@
+export { default as Empty } from './Empty.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';

package/lib/esm/components/Fieldset/Fieldset.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Children } from 'react';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import Tooltip from '../Tooltip/Tooltip.js';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+import 'react-dom';
+
+const Fieldset = ({ children, className, fieldsetid, grouperror, grouphelper, grouptooltip, legend, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--fieldset`;
+    const fieldsetClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    return (jsxs("fieldset", Object.assign({ className: fieldsetClasses, id: fieldsetid ? fieldsetid : undefined }, { children: [legend && (jsxs("legend", Object.assign({ className: `${baseClass}--legend` }, { children: [legend, grouptooltip && (jsx(Tooltip, { className: `${baseClass}--legend--tooltip`, icon: true, label: grouptooltip, theme: "dark" }))] }))), grouphelper && !grouperror && (jsx("span", Object.assign({ className: `${baseClass}--helper` }, { children: grouphelper }))), grouperror && (jsx("span", Object.assign({ className: `${baseClass}--error` }, { children: grouperror }))), Children.map(children, (child, i) => {
+                var _a;
+                return (jsx(Fragment, { children: child && child.props && (jsxs("div", Object.assign({ className: `${baseClass}--input${((_a = child.props) === null || _a === void 0 ? void 0 : _a.type) ? "--" + child.props.type : ""} ${child.props.error ? "error" : ""}` }, { children: [child.props.label && (jsxs("label", Object.assign({ className: `${baseClass}--label`, htmlFor: child.props.id ? child.props.id : child.props.name }, { children: [child.props.label, child.props.tooltip && (jsx(Tooltip, { className: `${baseClass}--label--tooltip`, icon: true, label: child.props.tooltip, theme: "dark" }))] }))), child, child.props.helper && !child.props.error && (jsx("span", Object.assign({ className: `${baseClass}--helper` }, { children: child.props.helper }))), child.props.error && (jsx("span", Object.assign({ className: `${baseClass}--error` }, { children: child.props.error })))] }), `${baseClass}--input--${i}`)) }));
+            })] })));
+};
+
+export { Fieldset as default };

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

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

package/lib/esm/components/FileUpload/FileUpload.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } 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 '../../GlobalCtx-7fb23cfa.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+
+const FileUpload = ({ callback, disabled = false, error, helper, id, label, multiple, name, placeholder, required, tooltip, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--file-upload`;
+    const FileUploadClasses = classNames("", {
+        [baseClass]: true,
+        [`error`]: error,
+    });
+    const [uploadfiles, setUploadFiles] = useState([]);
+    /**
+     * On change, add file to listed files, if there is a callback, call it
+     */
+    const handleChange = (e) => {
+        const files = e.target.files;
+        setUploadFiles(files);
+        if (callback) {
+            callback(e);
+        }
+    };
+    return (jsxs(Fieldset, Object.assign({ className: "file-upload" }, { children: [jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "file" }, { children: jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, multiple: multiple, placeholder: placeholder, required: required, type: "file", className: FileUploadClasses, "data-label": placeholder }) })), uploadfiles.length > 0 && (jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: [...uploadfiles].map((file, i) => (jsx("li", Object.assign({ className: `${baseClass}--list-item` }, { children: file.name }), `${baseClass}--list-item-${i}`))) })))] })));
+};
+
+export { FileUpload as default };

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

@@ -0,0 +1,11 @@
+export { default as FileUpload } from './FileUpload.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+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';

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

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import classNames from 'classnames';
+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 '../../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 { 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" })] })));
+};
+
+export { Form as default };

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

@@ -0,0 +1,25 @@
+export { default as Form } from './Form.js';
+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';

package/lib/esm/components/FormElement/FormElement.js

@@ -0,0 +1,17 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+// TODO: What is the point of this component?
+const FormElement = ({ children,
+// className,
+// error,
+// elemid,
+// helper,
+// label,
+// required,
+// tooltip,
+// type,
+ }) => {
+    return jsx(Fragment, { children: children });
+};
+
+export { FormElement as default };

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

@@ -0,0 +1,2 @@
+export { default as FormElement } from './FormElement.js';
+import 'react/jsx-runtime';

package/lib/esm/components/FormGroup/FormGroup.js

@@ -0,0 +1,56 @@
+import { createElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.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 '../../GlobalCtx-7fb23cfa.js';
+import '../Fieldset/Fieldset.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+import '../FormElement/FormElement.js';
+import '../Radio/Radio.js';
+
+const FormGroup = ({ className, formgroupid, items, legend, type, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--formgroup`;
+    const formGroupClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    return (jsxs("fieldset", Object.assign({ className: `${formGroupClasses} ${type}`, id: formgroupid ? formgroupid : undefined }, { children: [legend && jsx("legend", Object.assign({ className: `${baseClass}--legend` }, { children: legend })), 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 }, 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 }));
+                }
+            })] })));
+};
+
+export { FormGroup as default };

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

@@ -0,0 +1,20 @@
+export { default as FormGroup } from './FormGroup.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.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';

package/lib/esm/components/GlobalProvider/GlobalProvider.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { G as GlobalProviderContext } from '../../GlobalCtx-7fb23cfa.js';
+import 'react';
+
+var themeprefix = {
+	value: "ilo",
+	comment: "the prefix namespace for the theme"
+};
+
+const GlobalProvider = ({ prefix = themeprefix.value, children, }) => {
+    return (jsx(GlobalProviderContext.Provider, Object.assign({ value: {
+            prefix,
+        } }, { children: children })));
+};
+
+export { GlobalProvider as default };

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

@@ -0,0 +1,4 @@
+export { default as GlobalProvider } from './GlobalProvider.js';
+export { G as GlobalProviderContext } from '../../GlobalCtx-7fb23cfa.js';
+import 'react/jsx-runtime';
+import 'react';

package/lib/esm/components/Heading/Heading.js

@@ -0,0 +1,20 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const Heading = (_a) => {
+    var { level = "h3", children, className, type } = _a, rest = __rest(_a, ["level", "children", "className", "type"]);
+    const { prefix } = useGlobalSettings();
+    const UseHeading = level;
+    const baseClass = `${prefix}--${level}`;
+    const headingClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${type}`]: type,
+    });
+    return (jsx(UseHeading, Object.assign({ className: headingClasses }, rest, { children: children })));
+};
+
+export { Heading as default };

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

@@ -0,0 +1,7 @@
+export { default as Heading } from './Heading.js';
+import 'tslib';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';

package/lib/esm/components/Hero/Hero.js

@@ -0,0 +1,23 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import HeroCard from './HeroCard.js';
+import Image from '../Image/Image.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../Credit/Credit.js';
+
+const Hero = ({ className, image, heroCard, theme = "light", types, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--hero`;
+    const heroClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${theme}`]: theme,
+        [`${baseClass}--${types}`]: types,
+        [`${baseClass}--image`]: image,
+    });
+    return (jsx(Fragment, { children: jsxs("div", Object.assign({ className: heroClasses }, { children: [image && jsx(Image, Object.assign({}, image)), jsx(HeroCard, Object.assign({}, heroCard))] })) }));
+};
+
+export { Hero as default };

package/lib/esm/components/Hero/HeroCard.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const HeroCard = ({ className, alignment, datecopy, eyebrow, intro, socials, title, theme = "light", types = "article", }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--hero-card`;
+    const heroCardClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${alignment}`]: alignment,
+        [`${baseClass}--${theme}`]: theme,
+        [`${baseClass}--${types}`]: types,
+    });
+    return (jsxs("div", Object.assign({ className: heroCardClasses }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h2", Object.assign({ className: `${baseClass}--title` }, { children: title })), datecopy && jsx("p", Object.assign({ className: `${baseClass}--datecopy` }, { children: datecopy })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: socials &&
+                    socials.map((item, index) => {
+                        return (jsx("li", Object.assign({ className: `${baseClass}--list--item` }, { children: jsx("a", Object.assign({ className: `${baseClass}--link icon icon--${item.icon}`, href: item.url, title: item.label }, { children: item.label })) }), index));
+                    }) }))] })));
+};
+
+export { HeroCard as default };

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

@@ -0,0 +1,10 @@
+export { default as Hero } from './Hero.js';
+export { default as HeroCard } from './HeroCard.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../Image/Image.js';
+import '../Credit/Credit.js';

package/lib/esm/components/Icon/Icon.js

@@ -0,0 +1,22 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import * as icons from '@ilo-org/icons-react';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const Icon = ({ hidden, name, size }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--icon`;
+    const ariaHidden = hidden ? "hidden" : "";
+    const iconsize = size || 24;
+    const icon = name
+        ? createElement(icons[`${name.charAt(0).toUpperCase() + name.slice(1)}${iconsize}`], {
+            "aria-hidden": ariaHidden,
+            className: baseClass,
+        })
+        : false;
+    return jsx(Fragment, { children: icon });
+};
+
+export { Icon as default };

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

@@ -0,0 +1,7 @@
+export { default as Icon } from './Icon.js';
+import 'react/jsx-runtime';
+import 'react';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+import '@ilo-org/icons-react';