@ilo-org/react 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @ilo-org/react
 
+## 0.4.0
+
+### Minor Changes
+
+- 2aa1f1cc6: feat/react: Implementation of Card and CardGroup components
+- c24a5f721: Adds responsive logo component and styles
+- 77a4f5b75: LocalNav uses Logo component so that it can have sub-brands
+
+### Patch Changes
+
+- 2aa1f1cc6: enable profile to be themeable and address a few minor style issues
+- Updated dependencies [2aa1f1cc6]
+- Updated dependencies [2aa1f1cc6]
+- Updated dependencies [c24a5f721]
+  - @ilo-org/styles@0.2.0
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -9,7 +9,7 @@ This package provides the implementation of the Design System using [React](http
 - [@ilo-org/icons](./packages/icons)
 - [@ilo-org/icons-react](./packages/icons-react)
 
-## Installation and PNPM Commands
+## Installation
 
 To install
 

package/lib/cjs/{DailyMotion-2aa7f048.js → DailyMotion-5654fa6e.js}

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

package/lib/cjs/{Facebook-87e24af8.js → Facebook-1924e510.js}

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

package/lib/cjs/{FilePlayer-e1216cc8.js → FilePlayer-9c697e42.js}

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

package/lib/cjs/{Kaltura-a673a8e9.js → Kaltura-177bb003.js}

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

package/lib/cjs/{Mixcloud-f9575c31.js → Mixcloud-91a772a6.js}

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

package/lib/cjs/{Preview-468c3a7f.js → Preview-8e2afb6a.js}

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

package/lib/cjs/{SoundCloud-7c59f293.js → SoundCloud-089e0f30.js}

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

package/lib/cjs/{Streamable-83e516e5.js → Streamable-4ca5b9c7.js}

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

package/lib/cjs/{Twitch-fdfa1c77.js → Twitch-dbc5c387.js}

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

package/lib/cjs/{VideoPlayer-9ce35136.js → VideoPlayer-874a52b0.js}

@@ -641,7 +641,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerYouTube' */
-	    './YouTube-25a1d9a0.js'); }).then(function (n) { return n.YouTube; });
+	    './YouTube-23b7ec9e.js'); }).then(function (n) { return n.YouTube; });
 	  })
 	}, {
 	  key: 'soundcloud',
@@ -650,7 +650,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerSoundCloud' */
-	    './SoundCloud-7c59f293.js'); }).then(function (n) { return n.SoundCloud; });
+	    './SoundCloud-089e0f30.js'); }).then(function (n) { return n.SoundCloud; });
 	  })
 	}, {
 	  key: 'vimeo',
@@ -659,7 +659,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerVimeo' */
-	    './Vimeo-2cb7476f.js'); }).then(function (n) { return n.Vimeo; });
+	    './Vimeo-4d2029a8.js'); }).then(function (n) { return n.Vimeo; });
 	  })
 	}, {
 	  key: 'facebook',
@@ -668,7 +668,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerFacebook' */
-	    './Facebook-87e24af8.js'); }).then(function (n) { return n.Facebook; });
+	    './Facebook-1924e510.js'); }).then(function (n) { return n.Facebook; });
 	  })
 	}, {
 	  key: 'streamable',
@@ -677,7 +677,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerStreamable' */
-	    './Streamable-83e516e5.js'); }).then(function (n) { return n.Streamable; });
+	    './Streamable-4ca5b9c7.js'); }).then(function (n) { return n.Streamable; });
 	  })
 	}, {
 	  key: 'wistia',
@@ -686,7 +686,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerWistia' */
-	    './Wistia-5e830ac8.js'); }).then(function (n) { return n.Wistia; });
+	    './Wistia-cd0799ad.js'); }).then(function (n) { return n.Wistia; });
 	  })
 	}, {
 	  key: 'twitch',
@@ -695,7 +695,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerTwitch' */
-	    './Twitch-fdfa1c77.js'); }).then(function (n) { return n.Twitch; });
+	    './Twitch-dbc5c387.js'); }).then(function (n) { return n.Twitch; });
 	  })
 	}, {
 	  key: 'dailymotion',
@@ -704,7 +704,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerDailyMotion' */
-	    './DailyMotion-2aa7f048.js'); }).then(function (n) { return n.DailyMotion; });
+	    './DailyMotion-5654fa6e.js'); }).then(function (n) { return n.DailyMotion; });
 	  })
 	}, {
 	  key: 'mixcloud',
@@ -713,7 +713,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerMixcloud' */
-	    './Mixcloud-f9575c31.js'); }).then(function (n) { return n.Mixcloud; });
+	    './Mixcloud-91a772a6.js'); }).then(function (n) { return n.Mixcloud; });
 	  })
 	}, {
 	  key: 'vidyard',
@@ -722,7 +722,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerVidyard' */
-	    './Vidyard-096bba3c.js'); }).then(function (n) { return n.Vidyard; });
+	    './Vidyard-371acdcb.js'); }).then(function (n) { return n.Vidyard; });
 	  })
 	}, {
 	  key: 'kaltura',
@@ -731,7 +731,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerKaltura' */
-	    './Kaltura-a673a8e9.js'); }).then(function (n) { return n.Kaltura; });
+	    './Kaltura-177bb003.js'); }).then(function (n) { return n.Kaltura; });
 	  })
 	}, {
 	  key: 'file',
@@ -743,7 +743,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerFilePlayer' */
-	    './FilePlayer-e1216cc8.js'); }).then(function (n) { return n.FilePlayer; });
+	    './FilePlayer-9c697e42.js'); }).then(function (n) { return n.FilePlayer; });
 	  })
 	}];
 	exports["default"] = _default;
@@ -816,7 +816,7 @@ var hasArrayBuffer = typeof ArrayBuffer === 'function' && !!ArrayBuffer.isView;
 // Note: We **don't** need `envHasBigInt64Array` in fde es6/index.js
 
 function equal(a, b) {
-  // START: fast-deep-equal es6/index.js 3.1.1
+  // START: fast-deep-equal es6/index.js 3.1.3
   if (a === b) return true;
 
   if (a && b && typeof a == 'object' && typeof b == 'object') {
@@ -881,8 +881,13 @@ function equal(a, b) {
     }
 
     if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
-    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
-    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+    // START: Modifications:
+    // Apply guards for `Object.create(null)` handling. See:
+    // - https://github.com/FormidableLabs/react-fast-compare/issues/64
+    // - https://github.com/epoberezkin/fast-deep-equal/issues/49
+    if (a.valueOf !== Object.prototype.valueOf && typeof a.valueOf === 'function' && typeof b.valueOf === 'function') return a.valueOf() === b.valueOf();
+    if (a.toString !== Object.prototype.toString && typeof a.toString === 'function' && typeof b.toString === 'function') return a.toString() === b.toString();
+    // END: Modifications
 
     keys = Object.keys(a);
     length = keys.length;
@@ -1663,7 +1668,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-468c3a7f.js'); }).then(function (n) { return n.Preview; });
+  './Preview-8e2afb6a.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;

package/lib/cjs/{Vidyard-096bba3c.js → Vidyard-371acdcb.js}

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

package/lib/cjs/{Vimeo-2cb7476f.js → Vimeo-4d2029a8.js}

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

package/lib/cjs/{Wistia-5e830ac8.js → Wistia-cd0799ad.js}

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

package/lib/cjs/{YouTube-25a1d9a0.js → YouTube-23b7ec9e.js}

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

package/lib/cjs/components/Card/Card.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Link_Link = require('../Link/Link.js');
+var components_List_List = require('../List/List.js');
+var components_List_ListItem = require('../List/ListItem.js');
+var components_LinkList_LinkList = require('../LinkList/LinkList.js');
+var components_Profile_Profile = require('../Profile/Profile.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../../ListCtx-7db7fe04.js');
+
+const Card = ({ isvideo, eyebrow, title, color, theme, variant, size, cornercut, alignment, intro, date, eventdetails, profile, listitems, link, linklist, cta, image, source, dataset, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}--${variant}`, `${baseClass}--${color}`, {
+        [`${baseClass}--${cornercut}`]: cornercut,
+        [`${baseClass}--${alignment}`]: alignment,
+        [`${baseClass}--action`]: link,
+        [`${baseClass}--${size}`]: size,
+        [`${baseClass}--isvideo`]: isvideo,
+        [`${baseClass}--linklist`]: linklist,
+        [`${baseClass}--${theme}`]: theme,
+    });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link &&
+                variant != "data" &&
+                variant != "factlist" &&
+                variant != "stat" && (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}--image`, 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 && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), (variant == "multilink" || (variant == "data" && image)) && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date &&
+                                variant != "stat" &&
+                                variant != "data" &&
+                                variant != "graphicpromo" &&
+                                variant != "factlist" && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--event-date` }, { children: eventdetails }))), profile && profile.avatar && (jsxRuntime.jsx(components_Profile_Profile, { avatar: profile.avatar, description: profile.description, link: profile.link, name: profile.name, role: profile.role, className: `${prefix}--profile--contents--${theme}` })), listitems && (jsxRuntime.jsx(components_List_List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: listitems.map((item, index) => (jsxRuntime.jsx(components_List_ListItem, Object.assign({ id: `list${index}` }, { children: jsxRuntime.jsx("p", { children: item }) })))) }))), cta && cta.label && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--primary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "link__label" }, { children: cta.label })) }))), source && (jsxRuntime.jsx(components_Link_Link, Object.assign({ theme: theme, url: source.url }, { children: source.label }))), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup })), dataset &&
+                                dataset.content &&
+                                dataset.content.items &&
+                                dataset.content.items.map((item) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--data--content-label` }, { children: item.label })), jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--data--content-copy` }, { children: item.copy }))] }))), dataset && dataset.files && (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-files` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--data--content-label` }, { children: dataset.files.headline })), dataset.files.items &&
+                                        dataset.files.items.map((item) => (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`, href: item.url, download: true }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: item.label })) }))))] }))), dataset && dataset.links && (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-links` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--data--content-label` }, { children: dataset.links.headline })), dataset.links.items &&
+                                        dataset.links.items.map((item) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(components_Link_Link, Object.assign({ url: item.url }, { children: item.label })), jsxRuntime.jsx("span", { children: "\u00A0\u00A0" })] })))] })))] }))] }))] })));
+};
+
+module.exports = Card;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Card_Card = require('./Card.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Link/Link.js');
+require('../List/List.js');
+require('../../ListCtx-7db7fe04.js');
+require('../List/ListItem.js');
+require('../LinkList/LinkList.js');
+require('../Profile/Profile.js');
+
+const CardGroup = ({ cards, cardcount, cta }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--cardgroup`;
+    const cardGroupClasses = classNames(baseClass, `${baseClass}--${cardcount}`);
+    return (jsxRuntime.jsx("div", Object.assign({ className: cardGroupClasses }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [cards &&
+                    cards.map((card) => (jsxRuntime.jsx(components_Card_Card, { title: card.title, image: card.image, intro: card.intro, eyebrow: card.eyebrow, date: card.date, dataset: card.dataset, link: card.link, profile: card.profile, cta: card.cta, source: card.source, listitems: card.listitems, linklist: card.linklist, color: card.color, theme: card.theme, cornercut: card.cornercut, alignment: card.alignment, variant: card.variant, size: card.size }))), 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 })) })) })))] })) })));
+};
+
+module.exports = CardGroup;

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var components_Card_Card = require('./Card.js');
+var components_Card_CardGroup = require('./CardGroup.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Link/Link.js');
+require('../List/List.js');
+require('../../ListCtx-7db7fe04.js');
+require('../List/ListItem.js');
+require('../LinkList/LinkList.js');
+require('../Profile/Profile.js');
+
+
+
+exports.Card = components_Card_Card;
+exports.CardGroup = components_Card_CardGroup;

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

@@ -5,6 +5,7 @@ var require$$0 = require('react');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_ContextMenu_ContextMenu = require('../ContextMenu/ContextMenu.js');
 var classNames = require('classnames');
+var components_Logo_Logo = require('../Logo/Logo.js');
 require('tslib');
 require('../../GlobalCtx-97e4b433.js');
 
@@ -77,7 +78,8 @@ var brand = {
 	}
 };
 
-const LocalNav = ({ background, logo, siteurl, primarynav, mainlink, menucloselabel, languagelabel, languagecontextmenu, }) => {
+const DEFAULT_LOGO_SIZE = 280;
+const LocalNav = ({ background, logo, primarynav, mainlink, menucloselabel, languagelabel, languagecontextmenu, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const [toggleMenuOpen, setMenuToggleOpen] = require$$0.useState(false);
     const [toggleLanguageOpen, setLanguageToggleOpen] = require$$0.useState(false);
@@ -93,8 +95,8 @@ const LocalNav = ({ background, logo, siteurl, primarynav, mainlink, menuclosela
     const handleLanguageToggle = () => {
         setLanguageToggleOpen(!toggleLanguageOpen);
     };
-    return (jsxRuntime.jsx("header", Object.assign({ className: localNavClasses }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--utility-bar ${baseClass}--utility-bar--local`, style: { background: bg } }, { children: [jsxRuntime.jsxs("nav", Object.assign({ className: `${prefix}--nav--local` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--nav--local--logo-wrapper` }, { children: jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${prefix}--nav--local--logo-link` }, { children: jsxRuntime.jsx("img", { src: logo, alt: "ILO Logo", className: `${prefix}--nav--local--logo` }) })) })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--nav--local--set` }, { children: (primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
-                                primarynav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--local--item` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--local--link` }, { children: jsxRuntime.jsx("span", { children: item.label }) })) }), index))) }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [mainlink && (jsxRuntime.jsx("span", Object.assign({ className: `${prefix}--language-switcher--link--wrap` }, { children: jsxRuntime.jsx("a", Object.assign({ href: mainlink.url, className: `${prefix}--language-switcher--link` }, { children: mainlink.label })) }))), jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: "Menu" })), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--navigation` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { 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: logo, 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--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` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", { className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: "Close" })), 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) &&
+    return (jsxRuntime.jsx("header", Object.assign({ className: localNavClasses }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--utility-bar ${baseClass}--utility-bar--local`, style: { background: bg } }, { children: [jsxRuntime.jsxs("nav", Object.assign({ className: `${prefix}--nav--local` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--nav--local--logo-wrapper` }, { children: jsxRuntime.jsx(components_Logo_Logo, { url: logo.url, src: logo.src, alt: logo.alt, className: `${prefix}--nav--local--logo`, subbrand: logo.subbrand, theme: logo.theme, size: logo.size || DEFAULT_LOGO_SIZE }) })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--nav--local--set` }, { children: (primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
+                                primarynav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--local--item` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--local--link` }, { children: jsxRuntime.jsx("span", { children: item.label }) })) }), index))) }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [mainlink && (jsxRuntime.jsx("span", Object.assign({ className: `${prefix}--language-switcher--link--wrap` }, { children: jsxRuntime.jsx("a", Object.assign({ href: mainlink.url, className: `${prefix}--language-switcher--link` }, { children: mainlink.label })) }))), jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: "Menu" })), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--navigation` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsxRuntime.jsx(components_Logo_Logo, { url: logo.url, src: logo.src, alt: logo.alt, className: `${prefix}--nav--local--logo`, subbrand: logo.subbrand, theme: logo.theme, size: logo.size || DEFAULT_LOGO_SIZE }), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), 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` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", { className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: "Close" })), 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.jsx("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))) }))] }))] })) }))] })) })));
 };

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

@@ -8,6 +8,7 @@ require('tslib');
 require('../../GlobalCtx-97e4b433.js');
 require('../ContextMenu/ContextMenu.js');
 require('classnames');
+require('../Logo/Logo.js');
 
 
 

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

@@ -0,0 +1,153 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var classNames = require('classnames');
+require('../../GlobalCtx-97e4b433.js');
+
+const isOverflown = ({ clientHeight, clientWidth, scrollHeight, scrollWidth, }) => scrollHeight > clientHeight || scrollWidth > clientWidth;
+const getFullFontSize = (container, { maxSize = 600, startingHeight = 9, step = 0.5 }) => {
+    let i = startingHeight;
+    let overflow = false;
+    while (!overflow && i < maxSize) {
+        container.style.fontSize = `${i}px`;
+        container.style.lineHeight = `${i}px`;
+        overflow = isOverflown(container);
+        if (!overflow) {
+            i = i + step;
+        }
+    }
+    // Reset styles to the way they were
+    container.style.fontSize = "";
+    container.style.lineHeight = "";
+    // Return the ideal font size
+    return i - step;
+};
+const BaseLogo = (_a) => {
+    var { baseClass, className, subbrand, alt, src, style: userStyles, size = "fluid", theme = "light" } = _a, props = tslib.__rest(_a, ["baseClass", "className", "subbrand", "alt", "src", "style", "size", "theme"]);
+    // The logo image element
+    const imageRef = require$$0.useRef(null);
+    // The lockup container
+    const lockupRef = require$$0.useRef(null);
+    // The lockup text
+    const lockupTextRef = require$$0.useRef(null);
+    // Has the image loaded or not
+    const [imageLoaded, setImageLoaded] = require$$0.useState(false);
+    // Dynamic height of the image
+    const [imageHeight, setImageHeight] = require$$0.useState(0);
+    // Ratio of the font size to the height of the logo image
+    const [fontSizeRatio, setfontSizeRatio] = require$$0.useState(0);
+    // Is the logo visible? Default to true if not a subbrand
+    const [isLogoVisible, setIsLogoVisible] = require$$0.useState(!subbrand);
+    // Initial height of the image when it's loaded
+    const initialImageHeight = require$$0.useRef(null);
+    // Resize observer gets the initial height of the image when
+    // it loads and updates the height when it changes in state
+    const observer = require$$0.useRef(new ResizeObserver((entries) => {
+        const { height } = entries[0].contentRect;
+        if (!initialImageHeight.current) {
+            initialImageHeight.current = height;
+        }
+        setImageHeight(height);
+    }));
+    // Make the logo visible for subrand when everything is ready
+    require$$0.useEffect(() => {
+        if (subbrand && imageLoaded && fontSizeRatio) {
+            setIsLogoVisible(true);
+        }
+    }, [imageLoaded, fontSizeRatio, subbrand]);
+    // Set up the Resize observer to watch the image
+    require$$0.useEffect(() => {
+        if (imageLoaded && lockupRef.current && imageRef.current) {
+            const imageEl = imageRef.current;
+            observer.current.observe(imageEl);
+            return () => observer.current.unobserve(imageEl);
+        }
+    }, [imageLoaded]);
+    // Gets the font size necessary for the lockup text to fill the
+    // the lockup container as much as possible without overflowing.
+    // Then gets the ratio of full font size to image height which will
+    // be used to calculate the font size if the image gets resized
+    require$$0.useEffect(() => {
+        setFontSize();
+    }, [imageLoaded, initialImageHeight.current]);
+    // Adjust the font size if for some weird reason the subbrand changes
+    // This is mostly just to illustrate how the component works on Storybook
+    require$$0.useEffect(() => {
+        setFontSize();
+    }, [subbrand]);
+    function setFontSize() {
+        if (lockupRef.current &&
+            lockupTextRef.current &&
+            initialImageHeight.current) {
+            const fullFontSize = getFullFontSize(lockupRef.current, {
+                maxSize: initialImageHeight.current,
+            });
+            const ratio = fullFontSize / initialImageHeight.current;
+            setfontSizeRatio(ratio);
+        }
+    }
+    // Has the image loaded or not
+    function handleImageLoaded() {
+        setImageLoaded(true);
+    }
+    // Conditions for different CSS classes
+    const hasSubbrand = !!subbrand;
+    const hasFluidWidth = size === "fluid";
+    const hasFixedWidth = !hasFluidWidth && typeof size === "number";
+    // Classes for the outer figure container
+    const subBrandClass = `${baseClass}--sub-brand`;
+    const fluidWidthClass = `${baseClass}--size--fluid`;
+    const visibilityHidden = `${baseClass}--visibility--hidden`;
+    // Outer figure classes
+    const classNames$1 = classNames(baseClass, className, `${baseClass}--theme--${theme}`, {
+        [visibilityHidden]: !isLogoVisible,
+        [fluidWidthClass]: hasFluidWidth,
+        [subBrandClass]: hasSubbrand,
+    });
+    // Classes for the image element
+    const noSubBrandImageClass = `${baseClass}--image`;
+    const subBrandImageClass = `${subBrandClass}--image`;
+    // Set inline CSS including variables on the outer figure element
+    const getStyle = () => {
+        const conditionalStyles = {};
+        // Add CSS vars if this is a sub-brand
+        if (hasSubbrand) {
+            conditionalStyles["--logo-image-height"] = `${imageHeight}px`;
+            conditionalStyles["--logo-font-size"] = `${fontSizeRatio * imageHeight}px`;
+        }
+        // Add fixed width if it has fixed width
+        if (hasFixedWidth) {
+            conditionalStyles.width = `${size}px`;
+        }
+        // User styles may be overriden
+        return Object.assign({ userStyles }, conditionalStyles);
+    };
+    const getImageSrc = () => {
+        if (typeof src === "string") {
+            return src;
+        }
+        return src[theme];
+    };
+    return (jsxRuntime.jsxs("figure", Object.assign({ className: classNames$1, style: getStyle() }, { children: [jsxRuntime.jsx("img", Object.assign({ ref: imageRef, alt: alt, src: getImageSrc(), className: classNames({
+                    [subBrandImageClass]: hasSubbrand,
+                    [noSubBrandImageClass]: !hasSubbrand,
+                }), onLoad: handleImageLoaded }, props)), hasSubbrand && (jsxRuntime.jsxs("div", Object.assign({ ref: lockupRef, className: `${subBrandClass}--lock-up` }, { children: [jsxRuntime.jsx("span", { className: `${subBrandClass}--lock-up--separator` }), jsxRuntime.jsx("span", Object.assign({ ref: lockupTextRef }, { children: subbrand }))] })))] })));
+};
+const Logo = (_a) => {
+    var { className, url, target, style, size } = _a, props = tslib.__rest(_a, ["className", "url", "target", "style", "size"]);
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--logo`;
+    const linkClass = `${baseClass}--link`;
+    const fluidClass = `${baseClass}--size--fluid`;
+    if (url) {
+        return (jsxRuntime.jsx("a", Object.assign({ href: url, target: target, className: classNames(linkClass, className, {
+                [fluidClass]: size === "fluid",
+            }), style: style }, { children: jsxRuntime.jsx(BaseLogo, Object.assign({}, props, { baseClass: baseClass, size: size })) })));
+    }
+    return (jsxRuntime.jsx(BaseLogo, Object.assign({ baseClass: baseClass, className: className, style: style, size: size }, props)));
+};
+
+module.exports = Logo;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var components_Logo_Logo = require('./Logo.js');
+require('tslib');
+require('react/jsx-runtime');
+require('react');
+require('../../hooks/useGlobalSettings.js');
+require('../../GlobalCtx-97e4b433.js');
+require('classnames');
+
+
+
+exports.Logo = components_Logo_Logo;

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-9ce35136.js');
+var components_Video_VideoPlayer = require('../../VideoPlayer-874a52b0.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');

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

@@ -2,7 +2,7 @@
 
 require('react/jsx-runtime');
 require('react');
-var components_Video_VideoPlayer = require('../../VideoPlayer-9ce35136.js');
+var components_Video_VideoPlayer = require('../../VideoPlayer-874a52b0.js');
 require('react-dom');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');