@ilo-org/react 0.17.6 → 0.17.8

package/lib/cjs/components/Cards/CardGroup/CardGroup.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_Button_Button = require('../../Button/Button.js');
 var components_Cards_DataCard_DataCard = require('../DataCard/DataCard.js');
 var components_Cards_DetailCard_DetailCard = require('../DetailCard/DetailCard.js');
 var components_Cards_FactlistCard_FactListCard = require('../FactlistCard/FactListCard.js');
@@ -15,6 +16,8 @@ require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
 require('../../Link/Link.js');
+require('../../Icon/Icon.js');
+require('@ilo-org/icons-react');
 require('../../List/List.js');
 require('../../List/ListItem.js');
 require('../../LinkList/LinkList.js');
@@ -38,7 +41,7 @@ const CardGroup = ({ cards, titleLevel = "p", cardCount, cta, type, alignment, s
         [`${baseClass}__collapsed`]: collapsed,
     });
     return (jsxRuntime.jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards &&
-                    cards.map((card, index) => (jsxRuntime.jsx(Card, Object.assign({}, card, { size: size, theme: theme, alignment: alignment, titleLevel: titleLevel }), index))) })), cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
+                    cards.map((card, index) => (jsxRuntime.jsx(Card, Object.assign({}, card, { size: size, theme: theme, alignment: alignment, titleLevel: titleLevel }), index))) })), cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsxRuntime.jsx(components_Button_Button, { kind: "button", type: "secondary", size: "medium", label: cta.label, url: cta.url }) })))] })));
 };
 
 module.exports = CardGroup;

package/lib/cjs/components/Cards/CardGroup/index.js

@@ -7,8 +7,11 @@ require('../../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
-require('../DataCard/DataCard.js');
+require('../../Button/Button.js');
 require('../../Link/Link.js');
+require('../../Icon/Icon.js');
+require('@ilo-org/icons-react');
+require('../DataCard/DataCard.js');
 require('../DetailCard/DetailCard.js');
 require('../FactlistCard/FactListCard.js');
 require('../../List/List.js');

package/lib/cjs/components/Cards/MultilinkCard/MultiLinkCard.js

@@ -17,6 +17,7 @@ const MultilinkCard = ({ isvideo, eyebrow, title, size = "standard", alignment,
         [`${baseClass}__size__${size}`]: size,
         [`${baseClass}__isvideo`]: isvideo,
         [`${baseClass}__linklist`]: linklist,
+        [`${baseClass}__no-image`]: !image,
     });
     return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
 };

package/lib/cjs/components/Collapse/Collapse.js

@@ -383,16 +383,6 @@ function requireReactPropTypesSecret () {
 	return ReactPropTypesSecret_1;
 }
 
-var has;
-var hasRequiredHas;
-
-function requireHas () {
-	if (hasRequiredHas) return has;
-	hasRequiredHas = 1;
-	has = Function.call.bind(Object.prototype.hasOwnProperty);
-	return has;
-}
-
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -412,7 +402,7 @@ function requireCheckPropTypes () {
 	if (process.env.NODE_ENV !== 'production') {
 	  var ReactPropTypesSecret = requireReactPropTypesSecret();
 	  var loggedTypeFailures = {};
-	  var has = requireHas();
+	  var has = Function.call.bind(Object.prototype.hasOwnProperty);
 
 	  printWarning = function(text) {
 	    var message = 'Warning: ' + text;
@@ -424,7 +414,7 @@ function requireCheckPropTypes () {
 	      // This error was thrown as a convenience so that you can use this stack
 	      // to find the callsite that caused this warning to fire.
 	      throw new Error(message);
-	    } catch (x) { /**/ }
+	    } catch (x) {}
 	  };
 	}
 
@@ -453,8 +443,7 @@ function requireCheckPropTypes () {
 	          if (typeof typeSpecs[typeSpecName] !== 'function') {
 	            var err = Error(
 	              (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
-	              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +
-	              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'
+	              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
 	            );
 	            err.name = 'Invariant Violation';
 	            throw err;
@@ -522,9 +511,9 @@ function requireFactoryWithTypeCheckers () {
 	var assign = requireObjectAssign();
 
 	var ReactPropTypesSecret = requireReactPropTypesSecret();
-	var has = requireHas();
 	var checkPropTypes = requireCheckPropTypes();
 
+	var has = Function.call.bind(Object.prototype.hasOwnProperty);
 	var printWarning = function() {};
 
 	if (process.env.NODE_ENV !== 'production') {
@@ -625,7 +614,6 @@ function requireFactoryWithTypeCheckers () {
 	  // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
 	  var ReactPropTypes = {
 	    array: createPrimitiveTypeChecker('array'),
-	    bigint: createPrimitiveTypeChecker('bigint'),
 	    bool: createPrimitiveTypeChecker('boolean'),
 	    func: createPrimitiveTypeChecker('function'),
 	    number: createPrimitiveTypeChecker('number'),
@@ -671,9 +659,8 @@ function requireFactoryWithTypeCheckers () {
 	   * is prohibitively expensive if they are created too often, such as what
 	   * happens in oneOfType() for any type before the one that matched.
 	   */
-	  function PropTypeError(message, data) {
+	  function PropTypeError(message) {
 	    this.message = message;
-	    this.data = data && typeof data === 'object' ? data: {};
 	    this.stack = '';
 	  }
 	  // Make `instanceof Error` still work for returned errors.
@@ -708,7 +695,7 @@ function requireFactoryWithTypeCheckers () {
 	          ) {
 	            printWarning(
 	              'You are manually calling a React.PropTypes validation ' +
-	              'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
+	              'function for the `' + propFullName + '` prop on `' + componentName  + '`. This is deprecated ' +
 	              'and will throw in the standalone `prop-types` package. ' +
 	              'You may be seeing this warning due to a third-party PropTypes ' +
 	              'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
@@ -747,10 +734,7 @@ function requireFactoryWithTypeCheckers () {
 	        // 'of type `object`'.
 	        var preciseType = getPreciseType(propValue);
 
-	        return new PropTypeError(
-	          'Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'),
-	          {expectedType: expectedType}
-	        );
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
 	      }
 	      return null;
 	    }
@@ -894,19 +878,14 @@ function requireFactoryWithTypeCheckers () {
 	    }
 
 	    function validate(props, propName, componentName, location, propFullName) {
-	      var expectedTypes = [];
 	      for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
 	        var checker = arrayOfTypeCheckers[i];
-	        var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret);
-	        if (checkerResult == null) {
+	        if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) {
 	          return null;
 	        }
-	        if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
-	          expectedTypes.push(checkerResult.data.expectedType);
-	        }
 	      }
-	      var expectedTypesMessage = (expectedTypes.length > 0) ? ', expected one of type [' + expectedTypes.join(', ') + ']': '';
-	      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
+
+	      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
 	    }
 	    return createChainableTypeChecker(validate);
 	  }
@@ -921,13 +900,6 @@ function requireFactoryWithTypeCheckers () {
 	    return createChainableTypeChecker(validate);
 	  }
 
-	  function invalidValidatorError(componentName, location, propFullName, key, type) {
-	    return new PropTypeError(
-	      (componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' +
-	      'it must be a function, usually from the `prop-types` package, but received `' + type + '`.'
-	    );
-	  }
-
 	  function createShapeTypeChecker(shapeTypes) {
 	    function validate(props, propName, componentName, location, propFullName) {
 	      var propValue = props[propName];
@@ -937,8 +909,8 @@ function requireFactoryWithTypeCheckers () {
 	      }
 	      for (var key in shapeTypes) {
 	        var checker = shapeTypes[key];
-	        if (typeof checker !== 'function') {
-	          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+	        if (!checker) {
+	          continue;
 	        }
 	        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
 	        if (error) {
@@ -957,18 +929,16 @@ function requireFactoryWithTypeCheckers () {
 	      if (propType !== 'object') {
 	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
 	      }
-	      // We need to check all keys in case some are required but missing from props.
+	      // We need to check all keys in case some are required but missing from
+	      // props.
 	      var allKeys = assign({}, props[propName], shapeTypes);
 	      for (var key in allKeys) {
 	        var checker = shapeTypes[key];
-	        if (has(shapeTypes, key) && typeof checker !== 'function') {
-	          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
-	        }
 	        if (!checker) {
 	          return new PropTypeError(
 	            'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
 	            '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
-	            '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  ')
+	            '\nValid keys: ' +  JSON.stringify(Object.keys(shapeTypes), null, '  ')
 	          );
 	        }
 	        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
@@ -1162,7 +1132,6 @@ function requireFactoryWithThrowingShims () {
 	  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
 	  var ReactPropTypes = {
 	    array: shim,
-	    bigint: shim,
 	    bool: shim,
 	    func: shim,
 	    number: shim,

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

@@ -1,17 +1,17 @@
 '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_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
 var components_FormElement_FormElement = require('../FormElement/FormElement.js');
 require('tslib');
-require('react');
 require('../../GlobalCtx-10114bdd.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 
-const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, value, type = "text", }) => {
+const Input = React.forwardRef(({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, value, type = "text", }, ref) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--input`;
     const InputClasses = classNames("", {
@@ -26,7 +26,7 @@ const Input = ({ callback, disabled = false, error, helper, id, label, name, pla
             callback(e);
         }
     };
-    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, value: value, 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, value: value, className: InputClasses, ref: ref }) })) }));
+});
 
 module.exports = Input;

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

@@ -2,10 +2,10 @@
 
 var components_Input_Input = require('./Input.js');
 require('react/jsx-runtime');
+require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
-require('react');
 require('../../GlobalCtx-10114bdd.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');

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

@@ -32,6 +32,12 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
         [`${prefix}--select--open`]: toggleLanguageOpen,
         [`${prefix}--context--open`]: toggleLanguageOpen,
     });
+    const searchInputRef = React.useRef(null);
+    const handleSearchInputFocus = () => {
+        if (searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    };
     const handleMenuToggle = () => {
         setMenuToggleOpen(!toggleMenuOpen);
     };
@@ -46,6 +52,7 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
         }
         setSearchTabbable(true);
         setTimeout(() => setSearchToggleOpen(true), 10);
+        setTimeout(() => handleSearchInputFocus(), 50);
     };
     const handleSubnavToggle = () => {
         if (toggleSubnavOpen) {
@@ -70,7 +77,7 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
     return (jsxRuntime.jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button", onClick: handleLanguageToggle }, { children: languagelabel })), jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxRuntime.jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
                                                         languagecontextmenu.links.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link ${prefix}--nav--language` }, { children: item.label })) }), index))) }))] })) }))] })), jsxRuntime.jsxs("nav", Object.assign({ className: `${prefix}--nav`, "aria-labelledby": "primary-navigation" }, { children: [jsxRuntime.jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "primary-navigation" }, { children: primarynav === null || primarynav === void 0 ? void 0 : primarynav.navlabel })), jsxRuntime.jsxs("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: [(primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
                                                 primarynav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsxRuntime.jsx("nav", Object.assign({ style: { display: subnavTabbable ? "block" : "none" }, className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--subnav--inner ${prefix}--container` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsxRuntime.jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
-                                        subnav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsxRuntime.jsx("div", Object.assign({ style: { display: searchTabbable ? "block" : "none" }, className: `${prefix}--search-box` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--header--inner ${prefix}--container` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
+                                        subnav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsxRuntime.jsx("div", Object.assign({ style: { display: searchTabbable ? "block" : "none" }, className: `${prefix}--search-box` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--header--inner ${prefix}--container` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action, ref: searchInputRef }) })) }))] }))] })));
 };
 
 module.exports = Navigation;

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

@@ -14,7 +14,7 @@ require('@popperjs/core');
 require('../FormElement/FormElement.js');
 require('@ilo-org/icons-react');
 
-const SearchField = ({ action, callback, className, input, }) => {
+const SearchField = React.forwardRef(({ action, callback, className, input }, ref) => {
     const [searchValue, setSearchValue] = React.useState("");
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--searchfield`;
@@ -42,7 +42,7 @@ const SearchField = ({ action, callback, className, input, }) => {
     if (!inputHasType) {
         throw new Error("SearchField: Input must have type prop");
     }
-    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;
-};
+    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`, ref: ref }), 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/esm/components/Cards/CardGroup/CardGroup.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import Button from '../../Button/Button.js';
 import DataCard from '../DataCard/DataCard.js';
 import DetailCard from '../DetailCard/DetailCard.js';
 import FactlistCard from '../FactlistCard/FactListCard.js';
@@ -13,6 +14,8 @@ import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
 import '../../Link/Link.js';
+import '../../Icon/Icon.js';
+import '@ilo-org/icons-react';
 import '../../List/List.js';
 import '../../List/ListItem.js';
 import '../../LinkList/LinkList.js';
@@ -36,7 +39,7 @@ const CardGroup = ({ cards, titleLevel = "p", cardCount, cta, type, alignment, s
         [`${baseClass}__collapsed`]: collapsed,
     });
     return (jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards &&
-                    cards.map((card, index) => (jsx(Card, Object.assign({}, card, { size: size, theme: theme, alignment: alignment, titleLevel: titleLevel }), index))) })), cta && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
+                    cards.map((card, index) => (jsx(Card, Object.assign({}, card, { size: size, theme: theme, alignment: alignment, titleLevel: titleLevel }), index))) })), cta && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx(Button, { kind: "button", type: "secondary", size: "medium", label: cta.label, url: cta.url }) })))] })));
 };
 
 export { CardGroup as default };

package/lib/esm/components/Cards/CardGroup/index.js

@@ -5,8 +5,11 @@ import '../../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
-import '../DataCard/DataCard.js';
+import '../../Button/Button.js';
 import '../../Link/Link.js';
+import '../../Icon/Icon.js';
+import '@ilo-org/icons-react';
+import '../DataCard/DataCard.js';
 import '../DetailCard/DetailCard.js';
 import '../FactlistCard/FactListCard.js';
 import '../../List/List.js';

package/lib/esm/components/Cards/MultilinkCard/MultiLinkCard.js

@@ -15,6 +15,7 @@ const MultilinkCard = ({ isvideo, eyebrow, title, size = "standard", alignment,
         [`${baseClass}__size__${size}`]: size,
         [`${baseClass}__isvideo`]: isvideo,
         [`${baseClass}__linklist`]: linklist,
+        [`${baseClass}__no-image`]: !image,
     });
     return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsx(LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
 };

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

@@ -381,16 +381,6 @@ function requireReactPropTypesSecret () {
 	return ReactPropTypesSecret_1;
 }
 
-var has;
-var hasRequiredHas;
-
-function requireHas () {
-	if (hasRequiredHas) return has;
-	hasRequiredHas = 1;
-	has = Function.call.bind(Object.prototype.hasOwnProperty);
-	return has;
-}
-
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -410,7 +400,7 @@ function requireCheckPropTypes () {
 	if (process.env.NODE_ENV !== 'production') {
 	  var ReactPropTypesSecret = requireReactPropTypesSecret();
 	  var loggedTypeFailures = {};
-	  var has = requireHas();
+	  var has = Function.call.bind(Object.prototype.hasOwnProperty);
 
 	  printWarning = function(text) {
 	    var message = 'Warning: ' + text;
@@ -422,7 +412,7 @@ function requireCheckPropTypes () {
 	      // This error was thrown as a convenience so that you can use this stack
 	      // to find the callsite that caused this warning to fire.
 	      throw new Error(message);
-	    } catch (x) { /**/ }
+	    } catch (x) {}
 	  };
 	}
 
@@ -451,8 +441,7 @@ function requireCheckPropTypes () {
 	          if (typeof typeSpecs[typeSpecName] !== 'function') {
 	            var err = Error(
 	              (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
-	              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +
-	              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'
+	              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
 	            );
 	            err.name = 'Invariant Violation';
 	            throw err;
@@ -520,9 +509,9 @@ function requireFactoryWithTypeCheckers () {
 	var assign = requireObjectAssign();
 
 	var ReactPropTypesSecret = requireReactPropTypesSecret();
-	var has = requireHas();
 	var checkPropTypes = requireCheckPropTypes();
 
+	var has = Function.call.bind(Object.prototype.hasOwnProperty);
 	var printWarning = function() {};
 
 	if (process.env.NODE_ENV !== 'production') {
@@ -623,7 +612,6 @@ function requireFactoryWithTypeCheckers () {
 	  // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
 	  var ReactPropTypes = {
 	    array: createPrimitiveTypeChecker('array'),
-	    bigint: createPrimitiveTypeChecker('bigint'),
 	    bool: createPrimitiveTypeChecker('boolean'),
 	    func: createPrimitiveTypeChecker('function'),
 	    number: createPrimitiveTypeChecker('number'),
@@ -669,9 +657,8 @@ function requireFactoryWithTypeCheckers () {
 	   * is prohibitively expensive if they are created too often, such as what
 	   * happens in oneOfType() for any type before the one that matched.
 	   */
-	  function PropTypeError(message, data) {
+	  function PropTypeError(message) {
 	    this.message = message;
-	    this.data = data && typeof data === 'object' ? data: {};
 	    this.stack = '';
 	  }
 	  // Make `instanceof Error` still work for returned errors.
@@ -706,7 +693,7 @@ function requireFactoryWithTypeCheckers () {
 	          ) {
 	            printWarning(
 	              'You are manually calling a React.PropTypes validation ' +
-	              'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
+	              'function for the `' + propFullName + '` prop on `' + componentName  + '`. This is deprecated ' +
 	              'and will throw in the standalone `prop-types` package. ' +
 	              'You may be seeing this warning due to a third-party PropTypes ' +
 	              'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
@@ -745,10 +732,7 @@ function requireFactoryWithTypeCheckers () {
 	        // 'of type `object`'.
 	        var preciseType = getPreciseType(propValue);
 
-	        return new PropTypeError(
-	          'Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'),
-	          {expectedType: expectedType}
-	        );
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
 	      }
 	      return null;
 	    }
@@ -892,19 +876,14 @@ function requireFactoryWithTypeCheckers () {
 	    }
 
 	    function validate(props, propName, componentName, location, propFullName) {
-	      var expectedTypes = [];
 	      for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
 	        var checker = arrayOfTypeCheckers[i];
-	        var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret);
-	        if (checkerResult == null) {
+	        if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) {
 	          return null;
 	        }
-	        if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
-	          expectedTypes.push(checkerResult.data.expectedType);
-	        }
 	      }
-	      var expectedTypesMessage = (expectedTypes.length > 0) ? ', expected one of type [' + expectedTypes.join(', ') + ']': '';
-	      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
+
+	      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
 	    }
 	    return createChainableTypeChecker(validate);
 	  }
@@ -919,13 +898,6 @@ function requireFactoryWithTypeCheckers () {
 	    return createChainableTypeChecker(validate);
 	  }
 
-	  function invalidValidatorError(componentName, location, propFullName, key, type) {
-	    return new PropTypeError(
-	      (componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' +
-	      'it must be a function, usually from the `prop-types` package, but received `' + type + '`.'
-	    );
-	  }
-
 	  function createShapeTypeChecker(shapeTypes) {
 	    function validate(props, propName, componentName, location, propFullName) {
 	      var propValue = props[propName];
@@ -935,8 +907,8 @@ function requireFactoryWithTypeCheckers () {
 	      }
 	      for (var key in shapeTypes) {
 	        var checker = shapeTypes[key];
-	        if (typeof checker !== 'function') {
-	          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+	        if (!checker) {
+	          continue;
 	        }
 	        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
 	        if (error) {
@@ -955,18 +927,16 @@ function requireFactoryWithTypeCheckers () {
 	      if (propType !== 'object') {
 	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
 	      }
-	      // We need to check all keys in case some are required but missing from props.
+	      // We need to check all keys in case some are required but missing from
+	      // props.
 	      var allKeys = assign({}, props[propName], shapeTypes);
 	      for (var key in allKeys) {
 	        var checker = shapeTypes[key];
-	        if (has(shapeTypes, key) && typeof checker !== 'function') {
-	          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
-	        }
 	        if (!checker) {
 	          return new PropTypeError(
 	            'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
 	            '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
-	            '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  ')
+	            '\nValid keys: ' +  JSON.stringify(Object.keys(shapeTypes), null, '  ')
 	          );
 	        }
 	        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
@@ -1160,7 +1130,6 @@ function requireFactoryWithThrowingShims () {
 	  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
 	  var ReactPropTypes = {
 	    array: shim,
-	    bigint: shim,
 	    bool: shim,
 	    func: shim,
 	    number: shim,

package/lib/esm/components/Input/Input.js

@@ -1,15 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef } 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 '../../GlobalCtx-7fb23cfa.js';
 import '../Tooltip/Tooltip.js';
 import '@popperjs/core';
 
-const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, value, type = "text", }) => {
+const Input = forwardRef(({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, value, type = "text", }, ref) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--input`;
     const InputClasses = classNames("", {
@@ -24,7 +24,7 @@ const Input = ({ callback, disabled = false, error, helper, id, label, name, pla
             callback(e);
         }
     };
-    return (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: type, value: value, className: InputClasses }) })) }));
-};
+    return (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: type, value: value, className: InputClasses, ref: ref }) })) }));
+});
 
 export { Input as default };

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

@@ -1,9 +1,9 @@
 export { default as Input } from './Input.js';
 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 '../Tooltip/Tooltip.js';