@ilo-org/react 0.10.5 → 0.11.0

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

@@ -6,7 +6,7 @@ require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 
 

package/lib/cjs/components/LocalNav/LocalNav.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = require('react');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_ContextMenu_ContextMenu = require('../ContextMenu/ContextMenu.js');
 var classNames = require('classnames');
 var components_Logo_Logo = require('../Logo/Logo.js');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 var brand = {
 	"ilo-blue": {
@@ -75,8 +75,8 @@ var brand = {
 const DEFAULT_LOGO_SIZE = 280;
 const LocalNav = ({ background, logo, primarynav, mainlink, menucloselabel, languagelabel, languagecontextmenu, }) => {
     const { prefix } = hooks_useGlobalSettings();
-    const [toggleMenuOpen, setMenuToggleOpen] = require$$0.useState(false);
-    const [toggleLanguageOpen, setLanguageToggleOpen] = require$$0.useState(false);
+    const [toggleMenuOpen, setMenuToggleOpen] = React.useState(false);
+    const [toggleLanguageOpen, setLanguageToggleOpen] = React.useState(false);
     const baseClass = `${prefix}--header`;
     const localNavClasses = classNames(baseClass, `${baseClass}--local`, {
         [`${prefix}--mobile--open`]: toggleMenuOpen,

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

@@ -5,7 +5,7 @@ require('react/jsx-runtime');
 require('react');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../ContextMenu/ContextMenu.js');
 require('classnames');
 require('../Logo/Logo.js');

package/lib/cjs/components/Logo/Logo.js

@@ -2,10 +2,10 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = require('react');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var classNames = require('classnames');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const isOverflown = ({ clientHeight, clientWidth, scrollHeight, scrollWidth, }) => scrollHeight > clientHeight || scrollWidth > clientWidth;
 const getFullFontSize = (container, { maxSize = 600, startingHeight = 9, step = 0.5 }) => {
@@ -28,24 +28,24 @@ const getFullFontSize = (container, { maxSize = 600, startingHeight = 9, step =
 const BaseLogo = (_a) => {
     var { baseClass, className, subbrand, alt, src, style: userStyles, size = "fluid", theme = "light" } = _a, props = tslib.__rest(_a, ["baseClass", "className", "subbrand", "alt", "src", "style", "size", "theme"]);
     // The logo image element
-    const imageRef = require$$0.useRef(null);
+    const imageRef = React.useRef(null);
     // The lockup container
-    const lockupRef = require$$0.useRef(null);
+    const lockupRef = React.useRef(null);
     // The lockup text
-    const lockupTextRef = require$$0.useRef(null);
+    const lockupTextRef = React.useRef(null);
     // Initial height of the image when it's loaded
-    const initialImageHeight = require$$0.useRef(null);
+    const initialImageHeight = React.useRef(null);
     // Has the image loaded or not
-    const [imageLoaded, setImageLoaded] = require$$0.useState(false);
+    const [imageLoaded, setImageLoaded] = React.useState(false);
     // Dynamic height of the image
-    const [imageHeight, setImageHeight] = require$$0.useState(0);
+    const [imageHeight, setImageHeight] = React.useState(0);
     // Ratio of the font size to the height of the logo image
-    const [fontSizeRatio, setfontSizeRatio] = require$$0.useState(0);
+    const [fontSizeRatio, setfontSizeRatio] = React.useState(0);
     // Is the logo visible? Default to true if not a subbrand
-    const [isLogoVisible, setIsLogoVisible] = require$$0.useState(!subbrand);
+    const [isLogoVisible, setIsLogoVisible] = React.useState(!subbrand);
     // Resize observer gets the initial height of the image when
     // it loads and updates the height when it changes in state
-    const observer = require$$0.useRef(new ResizeObserver((entries) => {
+    const observer = React.useRef(new ResizeObserver((entries) => {
         const { height } = entries[0].contentRect;
         if (!initialImageHeight.current) {
             initialImageHeight.current = height;
@@ -53,13 +53,13 @@ const BaseLogo = (_a) => {
         setImageHeight(height);
     }));
     // Make the logo visible for subrand when everything is ready
-    require$$0.useEffect(() => {
+    React.useEffect(() => {
         if (subbrand && imageLoaded && fontSizeRatio) {
             setIsLogoVisible(true);
         }
     }, [imageLoaded, fontSizeRatio, subbrand]);
     // Set up the Resize observer to watch the image
-    require$$0.useLayoutEffect(() => {
+    React.useLayoutEffect(() => {
         if (imageLoaded && lockupRef.current && imageRef.current) {
             const imageEl = imageRef.current;
             observer.current.observe(imageEl);
@@ -70,12 +70,12 @@ const BaseLogo = (_a) => {
     // the lockup container as much as possible without overflowing.
     // Then gets the ratio of full font size to image height which will
     // be used to calculate the font size if the image gets resized
-    require$$0.useLayoutEffect(() => {
+    React.useLayoutEffect(() => {
         setFontSize();
     }, [imageLoaded, initialImageHeight.current]);
     // Adjust the font size if for some weird reason the subbrand changes
     // This is mostly just to illustrate how the component works on Storybook
-    require$$0.useLayoutEffect(() => {
+    React.useLayoutEffect(() => {
         setFontSize();
     }, [subbrand]);
     function setFontSize() {

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

@@ -5,7 +5,7 @@ require('tslib');
 require('react/jsx-runtime');
 require('react');
 require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('classnames');
 
 

package/lib/cjs/components/LogoGrid/LogoGrid.js

@@ -5,7 +5,7 @@ var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 require('react');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const LogoGridItem = ({ url, label, src }) => {
     const { prefix } = hooks_useGlobalSettings();

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

@@ -6,7 +6,7 @@ require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 
 

package/lib/cjs/components/Navigation/Navigation.js

@@ -1,25 +1,27 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = require('react');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_ContextMenu_ContextMenu = require('../ContextMenu/ContextMenu.js');
 var components_SearchField_SearchField = require('../SearchField/SearchField.js');
 var classNames = require('classnames');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../Input/Input.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 require('../FormElement/FormElement.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
 
 const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, menulabel, menucloselabel, searchlabel, searchfield, languagelabel, languagecontextmenu, }) => {
     const { prefix } = hooks_useGlobalSettings();
-    const [toggleMenuOpen, setMenuToggleOpen] = require$$0.useState(false);
-    const [toggleSearchOpen, setSearchToggleOpen] = require$$0.useState(false);
-    const [toggleSubnavOpen, setSubnavToggleOpen] = require$$0.useState(false);
-    const [toggleLanguageOpen, setLanguageToggleOpen] = require$$0.useState(false);
+    const [toggleMenuOpen, setMenuToggleOpen] = React.useState(false);
+    const [toggleSearchOpen, setSearchToggleOpen] = React.useState(false);
+    const [toggleSubnavOpen, setSubnavToggleOpen] = React.useState(false);
+    const [toggleLanguageOpen, setLanguageToggleOpen] = React.useState(false);
     const baseClass = `${prefix}--header`;
     const NavigationClasses = classNames(baseClass, {
         [`${prefix}--mobile--open`]: toggleMenuOpen,

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

@@ -5,7 +5,7 @@ require('react/jsx-runtime');
 require('react');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../ContextMenu/ContextMenu.js');
 require('classnames');
 require('../SearchField/SearchField.js');
@@ -14,6 +14,8 @@ require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 require('../FormElement/FormElement.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
 
 
 

package/lib/cjs/components/Notification/Notification.js

@@ -1,19 +1,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_Button_Button = require('../Button/Button.js');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../Link/Link.js');
 require('../Icon/Icon.js');
 require('@ilo-org/icons-react');
 
 const Notification = ({ className, closelabel, copy, cta, headline, placement, timestamp, type, }) => {
     const { prefix } = hooks_useGlobalSettings();
-    const [display, setDisplay] = require$$0.useState(true);
+    const [display, setDisplay] = React.useState(true);
     const baseClass = `${prefix}--notification`;
     const notificationClasses = classNames(className, {
         [baseClass]: true,

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

@@ -6,7 +6,7 @@ require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../Button/Button.js');
 require('../Link/Link.js');
 require('../Icon/Icon.js');

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

@@ -2,16 +2,16 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = 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('../../GlobalCtx-10114bdd.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 
-const NumberPicker = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, placeholder, required, max, min, step, }, ref) => {
+const NumberPicker = React.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, placeholder, required, max, min, step, }, ref) => {
     const { prefix } = hooks_useGlobalSettings();
     const formControlCtx = components_FormControl_FormControl.useFormControl();
     const { ariaDescribedBy } = formControlCtx;
@@ -28,7 +28,7 @@ const NumberPicker = require$$0.forwardRef(({ onChange, onBlur, disabled = false
     };
     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, max: max, min: min, step: step }));
 });
-const LabelledNumberPicker = require$$0.forwardRef((props, ref) => {
+const LabelledNumberPicker = React.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)) })));

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

@@ -6,7 +6,7 @@ require('react/jsx-runtime');
 require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../FormControl/FormControl.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');

package/lib/cjs/components/Pagination/Pagination.js

@@ -5,7 +5,7 @@ var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const Pagination = ({ className, callback, currentPage, firstPageUrl, firstPageTitle = "First page", lastPageUrl, lastPageTitle = "Last page", nextPageUrl, nextPageTitle = "Next page", pageCountPreposition = "of", prevPageUrl, prevPageTitle = "Previous page", totalPages, }) => {
     const { prefix } = hooks_useGlobalSettings();

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

@@ -6,7 +6,7 @@ require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 
 

package/lib/cjs/components/Profile/Profile.js

@@ -5,7 +5,7 @@ var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const Profile = ({ avatar, className, description, link, name, role, theme = "light", size = "large", }) => {
     const { prefix } = hooks_useGlobalSettings();

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

@@ -6,7 +6,7 @@ require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 
 

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

@@ -2,23 +2,23 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 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('../../GlobalCtx-10114bdd.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 require('nanoid');
 
-const Radio = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, required, checked, defaultChecked = false, value, }, ref) => {
+const Radio = React.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, required, checked, defaultChecked = false, value, }, ref) => {
     const { prefix } = hooks_useGlobalSettings();
     const { setHasError } = components_Fieldset_Fieldset.useFieldsetError();
     const formControlCtx = components_FormControl_FormControl.useFormControl();
     const prevError = hooks_usePrevious.usePrevious(error);
-    require$$0.useEffect(() => {
+    React.useEffect(() => {
         if (error !== prevError) {
             setHasError(!!error);
         }
@@ -38,7 +38,7 @@ const Radio = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error
     });
     return (jsxRuntime.jsxs("div", Object.assign({ className: RadioClasses }, { children: [jsxRuntime.jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, required: required, type: "radio", defaultChecked: defaultChecked, "aria-describedby": ariaDescribedBy, checked: checked, value: value }), jsxRuntime.jsx("span", { className: controlClass })] })));
 });
-const LabelledRadio = require$$0.forwardRef((props, ref) => {
+const LabelledRadio = React.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)) })));

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

@@ -6,7 +6,7 @@ require('react/jsx-runtime');
 require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');

package/lib/cjs/components/ReadMore/ReadMore.js

@@ -2,18 +2,18 @@
 
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_RichText_RichText = require('../RichText/RichText.js');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const ReadMore = (_a) => {
     var { buttonlabel, className, excerpt, fulltext, openatstart } = _a, rest = tslib.__rest(_a, ["buttonlabel", "className", "excerpt", "fulltext", "openatstart"]);
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--read-more`;
-    const [content, setContent] = require$$0.useState(openatstart ? fulltext : excerpt);
-    const [isopen, setOpen] = require$$0.useState(openatstart);
+    const [content, setContent] = React.useState(openatstart ? fulltext : excerpt);
+    const [isopen, setOpen] = React.useState(openatstart);
     const readMoreClasses = classNames(className, {
         [baseClass]: true,
         [`${baseClass}--open`]: isopen,

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

@@ -6,7 +6,7 @@ require('react/jsx-runtime');
 require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../RichText/RichText.js');
 
 

package/lib/cjs/components/RichText/RichText.js

@@ -5,7 +5,7 @@ var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const RichText = ({ className, content }) => {
     const { prefix } = hooks_useGlobalSettings();

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

@@ -6,7 +6,7 @@ require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 
 

package/lib/cjs/components/SearchField/SearchField.js

@@ -1,38 +1,48 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_Input_Input = require('../Input/Input.js');
+var components_Icon_Icon = require('../Icon/Icon.js');
 require('tslib');
-require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 require('../FormElement/FormElement.js');
+require('@ilo-org/icons-react');
 
 const SearchField = ({ action, callback, className, input, }) => {
+    const [searchValue, setSearchValue] = React.useState("");
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--searchfield`;
     const buttonClass = `${baseClass}--button`;
+    const clearButtonClass = `${baseClass}--clear-button ${searchValue.trim() !== "" && "show"}`;
+    const fieldSetClass = `${prefix}--fieldset`;
     const SearchFieldClasses = classNames(className, {
         [baseClass]: true,
         [`haslabel`]: input === null || input === void 0 ? void 0 : input.label,
     });
-    /**
-     * On click, if there is a callback, call it
-     */
     const handleClick = (e) => {
         if (callback) {
             callback(e);
         }
     };
+    // handle click for clear button in search
+    const handleClearButtonClick = () => {
+        setSearchValue("");
+    };
+    // Update search value on input
+    const onKeyPress = (e) => {
+        setSearchValue(e.target.value);
+    };
     const inputHasType = !!(input === null || input === void 0 ? void 0 : input.type);
     if (!inputHasType) {
         throw new Error("SearchField: Input must have type prop");
     }
-    return inputHasType ? (jsxRuntime.jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxRuntime.jsx(components_Input_Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: input === null || input === void 0 ? void 0 : input.callback, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, className: `${prefix}--input` }), jsxRuntime.jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
+    return inputHasType ? (jsxRuntime.jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: fieldSetClass }, { children: [jsxRuntime.jsx(components_Input_Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: onKeyPress, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, value: searchValue, className: `${prefix}--input` }), jsxRuntime.jsx("span", Object.assign({ onClick: handleClearButtonClick, className: clearButtonClass }, { children: jsxRuntime.jsx(components_Icon_Icon, { name: "close", hidden: true }) }))] })), jsxRuntime.jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
 };
 
 module.exports = SearchField;

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

@@ -2,16 +2,18 @@
 
 var components_SearchField_SearchField = require('./SearchField.js');
 require('react/jsx-runtime');
+require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
-require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../Input/Input.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 require('../FormElement/FormElement.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
 
 
 

package/lib/cjs/components/SocialMedia/SocialMedia.js

@@ -5,7 +5,7 @@ var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 require('react');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const SocialMedia = ({ className, theme = "light", justify = "start", headline, icons, }) => {
     const { prefix } = hooks_useGlobalSettings();

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

@@ -6,7 +6,7 @@ require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const defaultArgs = {
     headline: "Follow us on social media",

package/lib/cjs/components/TableOfContents/TableOfContents.js

@@ -5,7 +5,7 @@ var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const TableOfContents = ({ className, items }) => {
     const { prefix } = hooks_useGlobalSettings();

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

@@ -6,7 +6,7 @@ require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');