@ilo-org/react 0.10.4 → 0.10.6

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @ilo-org/react
 
+## 0.10.6
+
+### Patch Changes
+
+- 460210518: Add clear button to search input field
+- Updated dependencies [ac23bf484]
+- Updated dependencies [1b9c54f99]
+- Updated dependencies [138890e7a]
+  - @ilo-org/styles@0.14.0
+
+## 0.10.5
+
+### Patch Changes
+
+- 9bf73c7bd: Fix lists containing other elements than li items to improve accessibility
+- 056754038: Revise and refactor color names with the same values and remove duplicates and replace where it was used
+- e1000fbbd: added legacy classname for react video component
+- Updated dependencies [4153f99b5]
+- Updated dependencies [c8de2b695]
+- Updated dependencies [7472dd625]
+- Updated dependencies [b3298a267]
+- Updated dependencies [bf4432d7c]
+- Updated dependencies [1ed3123ae]
+- Updated dependencies [f76a35fdc]
+- Updated dependencies [a3c872512]
+- Updated dependencies [056754038]
+- Updated dependencies [4bbac5457]
+- Updated dependencies [e1000fbbd]
+- Updated dependencies [ac58b53d2]
+- Updated dependencies [51b20d4aa]
+- Updated dependencies [5a1e32f8e]
+- Updated dependencies [52eeae214]
+- Updated dependencies [709675b79]
+  - @ilo-org/styles@0.13.3
+  - @ilo-org/brand-assets@0.4.0
+  - @ilo-org/themes@0.7.1
+
 ## 0.10.4
 
 ### Patch Changes

package/lib/cjs/{DailyMotion-e06c9a92.js → DailyMotion-17b56ecb.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Facebook-d58c4f38.js → Facebook-0c8d86ee.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{FilePlayer-fd6ea462.js → FilePlayer-01d6dc08.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Kaltura-60c01a5d.js → Kaltura-40e8e581.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Mixcloud-124760a9.js → Mixcloud-e23f49d6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Preview-81296819.js → Preview-8e490f54.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{SoundCloud-1739c1f1.js → SoundCloud-2500b6cb.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Streamable-837b9cf6.js → Streamable-00723065.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Twitch-bf2a7602.js → Twitch-2c5c5733.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{VideoPlayer-e2de3674.js → VideoPlayer-5f0a64c6.js}

@@ -634,7 +634,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerYouTube' */
-	    './YouTube-588e57ea.js'); }).then(function (n) { return n.YouTube; });
+	    './YouTube-a3796a55.js'); }).then(function (n) { return n.YouTube; });
 	  })
 	}, {
 	  key: 'soundcloud',
@@ -643,7 +643,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerSoundCloud' */
-	    './SoundCloud-1739c1f1.js'); }).then(function (n) { return n.SoundCloud; });
+	    './SoundCloud-2500b6cb.js'); }).then(function (n) { return n.SoundCloud; });
 	  })
 	}, {
 	  key: 'vimeo',
@@ -652,7 +652,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerVimeo' */
-	    './Vimeo-fc878336.js'); }).then(function (n) { return n.Vimeo; });
+	    './Vimeo-d311e3b8.js'); }).then(function (n) { return n.Vimeo; });
 	  })
 	}, {
 	  key: 'facebook',
@@ -661,7 +661,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerFacebook' */
-	    './Facebook-d58c4f38.js'); }).then(function (n) { return n.Facebook; });
+	    './Facebook-0c8d86ee.js'); }).then(function (n) { return n.Facebook; });
 	  })
 	}, {
 	  key: 'streamable',
@@ -670,7 +670,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerStreamable' */
-	    './Streamable-837b9cf6.js'); }).then(function (n) { return n.Streamable; });
+	    './Streamable-00723065.js'); }).then(function (n) { return n.Streamable; });
 	  })
 	}, {
 	  key: 'wistia',
@@ -679,7 +679,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerWistia' */
-	    './Wistia-7aa618d2.js'); }).then(function (n) { return n.Wistia; });
+	    './Wistia-318b4e43.js'); }).then(function (n) { return n.Wistia; });
 	  })
 	}, {
 	  key: 'twitch',
@@ -688,7 +688,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerTwitch' */
-	    './Twitch-bf2a7602.js'); }).then(function (n) { return n.Twitch; });
+	    './Twitch-2c5c5733.js'); }).then(function (n) { return n.Twitch; });
 	  })
 	}, {
 	  key: 'dailymotion',
@@ -697,7 +697,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerDailyMotion' */
-	    './DailyMotion-e06c9a92.js'); }).then(function (n) { return n.DailyMotion; });
+	    './DailyMotion-17b56ecb.js'); }).then(function (n) { return n.DailyMotion; });
 	  })
 	}, {
 	  key: 'mixcloud',
@@ -706,7 +706,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerMixcloud' */
-	    './Mixcloud-124760a9.js'); }).then(function (n) { return n.Mixcloud; });
+	    './Mixcloud-e23f49d6.js'); }).then(function (n) { return n.Mixcloud; });
 	  })
 	}, {
 	  key: 'vidyard',
@@ -715,7 +715,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerVidyard' */
-	    './Vidyard-1256273d.js'); }).then(function (n) { return n.Vidyard; });
+	    './Vidyard-d36d6c45.js'); }).then(function (n) { return n.Vidyard; });
 	  })
 	}, {
 	  key: 'kaltura',
@@ -724,7 +724,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerKaltura' */
-	    './Kaltura-60c01a5d.js'); }).then(function (n) { return n.Kaltura; });
+	    './Kaltura-40e8e581.js'); }).then(function (n) { return n.Kaltura; });
 	  })
 	}, {
 	  key: 'file',
@@ -736,7 +736,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerFilePlayer' */
-	    './FilePlayer-fd6ea462.js'); }).then(function (n) { return n.FilePlayer; });
+	    './FilePlayer-01d6dc08.js'); }).then(function (n) { return n.FilePlayer; });
 	  })
 	}];
 	exports["default"] = _default;
@@ -1661,7 +1661,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Preview = /*#__PURE__*/(0, _react.lazy)(function () {
   return Promise.resolve().then(function () { return require(
   /* webpackChunkName: 'reactPlayerPreview' */
-  './Preview-81296819.js'); }).then(function (n) { return n.Preview; });
+  './Preview-8e490f54.js'); }).then(function (n) { return n.Preview; });
 });
 var IS_BROWSER = typeof window !== 'undefined' && window.document;
 var IS_GLOBAL = typeof commonjsGlobal !== 'undefined' && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -1917,7 +1917,7 @@ const ReactPlayer = RP;
 const VideoPlayer = ({ controls, src, poster, youtube, tracks, }) => {
     var _a;
     const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--video`;
+    const baseClass = `${prefix}--legacyvideo`;
     const playerClasses = classNames("", {
         [`${baseClass}--player`]: true,
         [`youtube`]: youtube,

package/lib/cjs/{Vidyard-1256273d.js → Vidyard-d36d6c45.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Vimeo-fc878336.js → Vimeo-d311e3b8.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Wistia-7aa618d2.js → Wistia-318b4e43.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{YouTube-588e57ea.js → YouTube-a3796a55.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-5f0a64c6.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

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

@@ -11,7 +11,7 @@ require('../../GlobalCtx-97e4b433.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 
-const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, type = "text", }) => {
+const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, value, type = "text", }) => {
     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, 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 }) })) }));
 };
 
 module.exports = Input;

package/lib/cjs/components/List/List.js

@@ -17,9 +17,9 @@ const List = ({ children, className, alignment, ordered, title, }) => {
         [`${baseClass}--${alignment}`]: alignment,
         [`${baseClass}--${ordered}`]: true,
     });
-    return (jsxRuntime.jsxs(ListCtx.ListContext.Provider, Object.assign({ value: {
+    return (jsxRuntime.jsx(ListCtx.ListContext.Provider, Object.assign({ value: {
             activeItems,
-        } }, { children: [ordered && ordered === "ordered" && (jsxRuntime.jsxs("ol", Object.assign({ className: listClasses }, { children: [title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}__title` }, { children: title })), children] }))), ordered && ordered !== "ordered" && (jsxRuntime.jsxs("ul", Object.assign({ className: listClasses }, { children: [title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}__title` }, { children: title })), children] })))] })));
+        } }, { children: jsxRuntime.jsxs("div", Object.assign({ className: listClasses }, { children: [title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}__title` }, { children: title })), ordered && ordered === "ordered" && jsxRuntime.jsx("ol", { children: children }), ordered && ordered !== "ordered" && (jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--${alignment}` }, { children: children })))] })) })));
 };
 
 module.exports = List;

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

@@ -37,9 +37,6 @@ var brand = {
 	"ilo-dark-red": {
 		value: "rgba(200, 48, 60, 1)"
 	},
-	"ilo-lighter-blue": {
-		value: "rgba(235, 245, 253, 1)"
-	},
 	"ilo-light-blue": {
 		value: "rgba(235, 245, 253, 1)"
 	},
@@ -55,9 +52,6 @@ var brand = {
 	"ilo-grey-accessible": {
 		value: "rgba(109, 109, 109, 1)"
 	},
-	"ilo-grey-charcoal": {
-		value: "rgba(45, 45, 45, 1)"
-	},
 	"ilo-black": {
 		value: "rgba(45, 45, 45, 1)"
 	},

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

@@ -13,6 +13,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');
 
 const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, menulabel, menucloselabel, searchlabel, searchfield, languagelabel, languagecontextmenu, }) => {
     const { prefix } = hooks_useGlobalSettings();

package/lib/cjs/components/Navigation/index.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/SearchField/SearchField.js

@@ -1,38 +1,48 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = 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('../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] = require$$0.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('../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/Video/Video.js

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_Video_VideoPlayer = require('../../VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('../../VideoPlayer-5f0a64c6.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
@@ -14,7 +14,7 @@ require('screenfull');
 
 const Video = ({ className, caption, poster, video }) => {
     const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--video`;
+    const baseClass = `${prefix}--legacyvideo`;
     const videoClasses = classNames(className, {
         [baseClass]: true,
     });

package/lib/cjs/components/Video/VideoPlayer.js

@@ -2,7 +2,7 @@
 
 require('react/jsx-runtime');
 require('react');
-var components_Video_VideoPlayer = require('../../VideoPlayer-e2de3674.js');
+var components_Video_VideoPlayer = require('../../VideoPlayer-5f0a64c6.js');
 require('react-dom');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');

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

@@ -7,7 +7,7 @@ require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
-require('../../VideoPlayer-e2de3674.js');
+require('../../VideoPlayer-5f0a64c6.js');
 require('../../index-0af02e81.js');
 require('react-dom');
 require('../../utils/hoursMinutesSeconds.js');

package/lib/cjs/components/index.js

@@ -74,7 +74,7 @@ require('./Hero/HeroCard.js');
 require('./SocialMedia/SocialMedia.js');
 require('./Input/Input.js');
 require('./FormElement/FormElement.js');
-require('../VideoPlayer-e2de3674.js');
+require('../VideoPlayer-5f0a64c6.js');
 require('../utils/hoursMinutesSeconds.js');
 require('screenfull');
 require('@ilo-org/icons-react');

package/lib/cjs/index.js

@@ -75,7 +75,7 @@ require('./components/Hero/HeroCard.js');
 require('./components/SocialMedia/SocialMedia.js');
 require('./components/Input/Input.js');
 require('./components/FormElement/FormElement.js');
-require('./VideoPlayer-e2de3674.js');
+require('./VideoPlayer-5f0a64c6.js');
 require('./utils/hoursMinutesSeconds.js');
 require('screenfull');
 require('./components/Logo/Logo.js');

package/lib/esm/{DailyMotion-2e38ef76.js → DailyMotion-989c2db3.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Facebook-4a2334f4.js → Facebook-04e9cc59.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{FilePlayer-40e1ae01.js → FilePlayer-0789336d.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Kaltura-c80bdfb7.js → Kaltura-a9ed37a9.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Mixcloud-b0f9376b.js → Mixcloud-5a3b4353.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Preview-07219fbc.js → Preview-7ca1835e.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{SoundCloud-78094ae3.js → SoundCloud-47bccd79.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Streamable-44c36485.js → Streamable-ee762126.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Twitch-cec3b85d.js → Twitch-3cd4b54b.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{VideoPlayer-b5d125fd.js → VideoPlayer-96c2b20c.js}

@@ -632,7 +632,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerYouTube' */
-	    './YouTube-2e7e24ca.js').then(function (n) { return n.Y; });
+	    './YouTube-db52da1c.js').then(function (n) { return n.Y; });
 	  })
 	}, {
 	  key: 'soundcloud',
@@ -641,7 +641,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerSoundCloud' */
-	    './SoundCloud-78094ae3.js').then(function (n) { return n.S; });
+	    './SoundCloud-47bccd79.js').then(function (n) { return n.S; });
 	  })
 	}, {
 	  key: 'vimeo',
@@ -650,7 +650,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerVimeo' */
-	    './Vimeo-dd76c909.js').then(function (n) { return n.V; });
+	    './Vimeo-4b29b580.js').then(function (n) { return n.V; });
 	  })
 	}, {
 	  key: 'facebook',
@@ -659,7 +659,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerFacebook' */
-	    './Facebook-4a2334f4.js').then(function (n) { return n.F; });
+	    './Facebook-04e9cc59.js').then(function (n) { return n.F; });
 	  })
 	}, {
 	  key: 'streamable',
@@ -668,7 +668,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerStreamable' */
-	    './Streamable-44c36485.js').then(function (n) { return n.S; });
+	    './Streamable-ee762126.js').then(function (n) { return n.S; });
 	  })
 	}, {
 	  key: 'wistia',
@@ -677,7 +677,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerWistia' */
-	    './Wistia-d98e9e9e.js').then(function (n) { return n.W; });
+	    './Wistia-3cbce669.js').then(function (n) { return n.W; });
 	  })
 	}, {
 	  key: 'twitch',
@@ -686,7 +686,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerTwitch' */
-	    './Twitch-cec3b85d.js').then(function (n) { return n.T; });
+	    './Twitch-3cd4b54b.js').then(function (n) { return n.T; });
 	  })
 	}, {
 	  key: 'dailymotion',
@@ -695,7 +695,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerDailyMotion' */
-	    './DailyMotion-2e38ef76.js').then(function (n) { return n.D; });
+	    './DailyMotion-989c2db3.js').then(function (n) { return n.D; });
 	  })
 	}, {
 	  key: 'mixcloud',
@@ -704,7 +704,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerMixcloud' */
-	    './Mixcloud-b0f9376b.js').then(function (n) { return n.M; });
+	    './Mixcloud-5a3b4353.js').then(function (n) { return n.M; });
 	  })
 	}, {
 	  key: 'vidyard',
@@ -713,7 +713,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerVidyard' */
-	    './Vidyard-44d40c02.js').then(function (n) { return n.V; });
+	    './Vidyard-258ab0ef.js').then(function (n) { return n.V; });
 	  })
 	}, {
 	  key: 'kaltura',
@@ -722,7 +722,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerKaltura' */
-	    './Kaltura-c80bdfb7.js').then(function (n) { return n.K; });
+	    './Kaltura-a9ed37a9.js').then(function (n) { return n.K; });
 	  })
 	}, {
 	  key: 'file',
@@ -734,7 +734,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerFilePlayer' */
-	    './FilePlayer-40e1ae01.js').then(function (n) { return n.F; });
+	    './FilePlayer-0789336d.js').then(function (n) { return n.F; });
 	  })
 	}];
 	exports["default"] = _default;
@@ -1659,7 +1659,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Preview = /*#__PURE__*/(0, _react.lazy)(function () {
   return import(
   /* webpackChunkName: 'reactPlayerPreview' */
-  './Preview-07219fbc.js').then(function (n) { return n.P; });
+  './Preview-7ca1835e.js').then(function (n) { return n.P; });
 });
 var IS_BROWSER = typeof window !== 'undefined' && window.document;
 var IS_GLOBAL = typeof commonjsGlobal !== 'undefined' && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -1915,7 +1915,7 @@ const ReactPlayer = RP;
 const VideoPlayer = ({ controls, src, poster, youtube, tracks, }) => {
     var _a;
     const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--video`;
+    const baseClass = `${prefix}--legacyvideo`;
     const playerClasses = classNames("", {
         [`${baseClass}--player`]: true,
         [`youtube`]: youtube,

package/lib/esm/{Vidyard-44d40c02.js → Vidyard-258ab0ef.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Vimeo-dd76c909.js → Vimeo-4b29b580.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Wistia-d98e9e9e.js → Wistia-3cbce669.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{YouTube-2e7e24ca.js → YouTube-db52da1c.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-96c2b20c.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

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

@@ -9,7 +9,7 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../Tooltip/Tooltip.js';
 import '@popperjs/core';
 
-const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, type = "text", }) => {
+const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, value, type = "text", }) => {
     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, 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 }) })) }));
 };
 
 export { Input as default };

package/lib/esm/components/List/List.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { useState } from 'react';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
@@ -15,9 +15,9 @@ const List = ({ children, className, alignment, ordered, title, }) => {
         [`${baseClass}--${alignment}`]: alignment,
         [`${baseClass}--${ordered}`]: true,
     });
-    return (jsxs(ListContext.Provider, Object.assign({ value: {
+    return (jsx(ListContext.Provider, Object.assign({ value: {
             activeItems,
-        } }, { children: [ordered && ordered === "ordered" && (jsxs("ol", Object.assign({ className: listClasses }, { children: [title && jsx("h5", Object.assign({ className: `${baseClass}__title` }, { children: title })), children] }))), ordered && ordered !== "ordered" && (jsxs("ul", Object.assign({ className: listClasses }, { children: [title && jsx("h5", Object.assign({ className: `${baseClass}__title` }, { children: title })), children] })))] })));
+        } }, { children: jsxs("div", Object.assign({ className: listClasses }, { children: [title && jsx("h5", Object.assign({ className: `${baseClass}__title` }, { children: title })), ordered && ordered === "ordered" && jsx("ol", { children: children }), ordered && ordered !== "ordered" && (jsx("ul", Object.assign({ className: `${baseClass}--${alignment}` }, { children: children })))] })) })));
 };
 
 export { List as default };

package/lib/esm/components/LocalNav/LocalNav.js

@@ -35,9 +35,6 @@ var brand = {
 	"ilo-dark-red": {
 		value: "rgba(200, 48, 60, 1)"
 	},
-	"ilo-lighter-blue": {
-		value: "rgba(235, 245, 253, 1)"
-	},
 	"ilo-light-blue": {
 		value: "rgba(235, 245, 253, 1)"
 	},
@@ -53,9 +50,6 @@ var brand = {
 	"ilo-grey-accessible": {
 		value: "rgba(109, 109, 109, 1)"
 	},
-	"ilo-grey-charcoal": {
-		value: "rgba(45, 45, 45, 1)"
-	},
 	"ilo-black": {
 		value: "rgba(45, 45, 45, 1)"
 	},

package/lib/esm/components/Navigation/Navigation.js

@@ -11,6 +11,8 @@ import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
 import '@popperjs/core';
 import '../FormElement/FormElement.js';
+import '../Icon/Icon.js';
+import '@ilo-org/icons-react';
 
 const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, menulabel, menucloselabel, searchlabel, searchfield, languagelabel, languagecontextmenu, }) => {
     const { prefix } = useGlobalSettings();

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

@@ -12,3 +12,5 @@ import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
 import '@popperjs/core';
 import '../FormElement/FormElement.js';
+import '../Icon/Icon.js';
+import '@ilo-org/icons-react';

package/lib/esm/components/SearchField/SearchField.js

@@ -1,36 +1,46 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import Input from '../Input/Input.js';
+import Icon from '../Icon/Icon.js';
 import 'tslib';
-import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
 import '@popperjs/core';
 import '../FormElement/FormElement.js';
+import '@ilo-org/icons-react';
 
 const SearchField = ({ action, callback, className, input, }) => {
+    const [searchValue, setSearchValue] = useState("");
     const { prefix } = 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 ? (jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsx(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` }), jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
+    return inputHasType ? (jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxs("div", Object.assign({ className: fieldSetClass }, { children: [jsx(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` }), jsx("span", Object.assign({ onClick: handleClearButtonClick, className: clearButtonClass }, { children: jsx(Icon, { name: "close", hidden: true }) }))] })), jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
 };
 
 export { SearchField as default };

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

@@ -1,12 +1,14 @@
 export { default as SearchField } from './SearchField.js';
 import 'react/jsx-runtime';
+import 'react';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';
 import 'tslib';
-import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Input/Input.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
 import '@popperjs/core';
 import '../FormElement/FormElement.js';
+import '../Icon/Icon.js';
+import '@ilo-org/icons-react';

package/lib/esm/components/Video/Video.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import { V as VideoPlayer } from '../../VideoPlayer-b5d125fd.js';
+import { V as VideoPlayer } from '../../VideoPlayer-96c2b20c.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
@@ -12,7 +12,7 @@ import 'screenfull';
 
 const Video = ({ className, caption, poster, video }) => {
     const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--video`;
+    const baseClass = `${prefix}--legacyvideo`;
     const videoClasses = classNames(className, {
         [baseClass]: true,
     });

package/lib/esm/components/Video/VideoPlayer.js

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import 'react';
-export { V as default } from '../../VideoPlayer-b5d125fd.js';
+export { V as default } from '../../VideoPlayer-96c2b20c.js';
 import 'react-dom';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';

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

@@ -5,7 +5,7 @@ import '../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../../VideoPlayer-b5d125fd.js';
+import '../../VideoPlayer-96c2b20c.js';
 import '../../index-623ce3f5.js';
 import 'react-dom';
 import '../../utils/hoursMinutesSeconds.js';

package/lib/esm/components/index.js

@@ -72,7 +72,7 @@ import './Hero/HeroCard.js';
 import './SocialMedia/SocialMedia.js';
 import './Input/Input.js';
 import './FormElement/FormElement.js';
-import '../VideoPlayer-b5d125fd.js';
+import '../VideoPlayer-96c2b20c.js';
 import '../utils/hoursMinutesSeconds.js';
 import 'screenfull';
 import '@ilo-org/icons-react';

package/lib/esm/index.js

@@ -73,7 +73,7 @@ import './components/Hero/HeroCard.js';
 import './components/SocialMedia/SocialMedia.js';
 import './components/Input/Input.js';
 import './components/FormElement/FormElement.js';
-import './VideoPlayer-b5d125fd.js';
+import './VideoPlayer-96c2b20c.js';
 import './utils/hoursMinutesSeconds.js';
 import 'screenfull';
 import './components/Logo/Logo.js';

package/lib/types/react/src/components/Input/Input.props.d.ts

@@ -48,4 +48,5 @@ export interface InputProps {
      * The input's type.
      */
     type: TextInputTypes;
+    value: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -74,11 +74,11 @@
     "nanoid": "^3.3.6",
     "react-player": "2.10.1",
     "react-transition-group": "^4.4.1",
-    "@ilo-org/brand-assets": "0.3.1",
-    "@ilo-org/fonts": "0.1.2",
+    "@ilo-org/brand-assets": "0.4.0",
     "@ilo-org/icons-react": "0.0.21",
-    "@ilo-org/styles": "0.13.2",
-    "@ilo-org/themes": "0.7.0",
+    "@ilo-org/fonts": "0.1.2",
+    "@ilo-org/styles": "0.14.0",
+    "@ilo-org/themes": "0.7.1",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {
@@ -132,8 +132,8 @@
     "tslib": "^2.3.1",
     "vite": "^4.5.2",
     "@ilo-org/eslint-config": "0.1.0",
-    "@ilo-org/prettier-config": "0.0.2",
-    "@ilo-org/typescript-config": "0.0.1"
+    "@ilo-org/typescript-config": "0.0.1",
+    "@ilo-org/prettier-config": "0.0.2"
   },
   "peerDependencies": {
     "react": ">16",

package/src/components/Input/Input.props.ts

@@ -60,4 +60,6 @@ export interface InputProps {
    * The input's type.
    */
   type: TextInputTypes;
+
+  value: string;
 }

package/src/components/Input/Input.tsx

@@ -16,6 +16,7 @@ const Input: FC<InputProps> = ({
   placeholder,
   required,
   tooltip,
+  value,
   type = "text",
 }) => {
   const { prefix } = useGlobalSettings();
@@ -53,6 +54,7 @@ const Input: FC<InputProps> = ({
           placeholder={placeholder}
           required={required as any}
           type={type}
+          value={value}
           className={InputClasses}
         />
       </FormElement>

package/src/components/List/List.tsx

@@ -27,18 +27,13 @@ const List: FC<ListProps> = ({
         activeItems,
       }}
     >
-      {ordered && ordered === "ordered" && (
-        <ol className={listClasses}>
-          {title && <h5 className={`${baseClass}__title`}>{title}</h5>}
-          {children}
-        </ol>
-      )}
-      {ordered && ordered !== "ordered" && (
-        <ul className={listClasses}>
-          {title && <h5 className={`${baseClass}__title`}>{title}</h5>}
-          {children}
-        </ul>
-      )}
+      <div className={listClasses}>
+        {title && <h5 className={`${baseClass}__title`}>{title}</h5>}
+        {ordered && ordered === "ordered" && <ol>{children}</ol>}
+        {ordered && ordered !== "ordered" && (
+          <ul className={`${baseClass}--${alignment}`}>{children}</ul>
+        )}
+      </div>
     </ListContext.Provider>
   );
 };

package/src/components/SearchField/SearchField.args.ts

@@ -8,6 +8,7 @@ const searchfield: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 
@@ -20,6 +21,7 @@ const searchfielderror: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 
@@ -31,6 +33,7 @@ const searchfielddisabled: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 
@@ -41,6 +44,7 @@ const searchfieldlabel: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 
@@ -51,6 +55,7 @@ const searchfieldhelper: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 

package/src/components/SearchField/SearchField.tsx

@@ -1,8 +1,9 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { SearchFieldProps } from "./SearchField.props";
 import { Input } from "../Input";
+import { Icon } from "../Icon";
 
 const SearchField: FC<SearchFieldProps> = ({
   action,
@@ -10,24 +11,39 @@ const SearchField: FC<SearchFieldProps> = ({
   className,
   input,
 }) => {
+  const [searchValue, setSearchValue] = useState("");
+
   const { prefix } = 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?.label,
   });
 
-  /**
-   * On click, if there is a callback, call it
-   */
   const handleClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
     if (callback) {
       callback(e);
     }
   };
 
+  // handle click for clear button in search
+  const handleClearButtonClick: React.MouseEventHandler<
+    HTMLInputElement
+  > = () => {
+    setSearchValue("");
+  };
+
+  // Update search value on input
+  const onKeyPress: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearchValue(e.target.value);
+  };
+
   const inputHasType = !!input?.type;
 
   if (!inputHasType) {
@@ -36,18 +52,24 @@ const SearchField: FC<SearchFieldProps> = ({
 
   return inputHasType ? (
     <form className={SearchFieldClasses} action={action}>
-      <Input
-        id={input?.id}
-        name={input?.name}
-        disabled={input?.disabled}
-        callback={input?.callback}
-        error={input?.error}
-        helper={input?.helper}
-        label={input?.label}
-        placeholder={input?.placeholder}
-        type={input?.type}
-        className={`${prefix}--input`}
-      />
+      <div className={fieldSetClass}>
+        <Input
+          id={input?.id}
+          name={input?.name}
+          disabled={input?.disabled}
+          callback={onKeyPress}
+          error={input?.error}
+          helper={input?.helper}
+          label={input?.label}
+          placeholder={input?.placeholder}
+          type={input?.type}
+          value={searchValue}
+          className={`${prefix}--input`}
+        />
+        <span onClick={handleClearButtonClick} className={clearButtonClass}>
+          <Icon name="close" hidden={true} />
+        </span>
+      </div>
       <input
         className={buttonClass}
         disabled={input?.disabled}

package/src/components/Video/Video.tsx

@@ -6,7 +6,7 @@ import VideoPlayer from "./VideoPlayer";
 
 const Video: FC<VideoProps> = ({ className, caption, poster, video }) => {
   const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--video`;
+  const baseClass = `${prefix}--legacyvideo`;
 
   const videoClasses = classNames(className, {
     [baseClass]: true,

package/src/components/Video/VideoPlayer.tsx

@@ -27,7 +27,7 @@ const VideoPlayer: FC<VideoPlayerProps> = ({
   tracks,
 }) => {
   const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--video`;
+  const baseClass = `${prefix}--legacyvideo`;
 
   const playerClasses = classNames("", {
     [`${baseClass}--player`]: true,