@ilo-org/react 0.3.0 → 0.4.0

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-9ce35136.js');
+require('../../VideoPlayer-874a52b0.js');
 require('../../index-1b6434f0.js');
 require('react-dom');
 require('../../utils/hoursMinutesSeconds.js');

package/lib/cjs/components/index.js

@@ -53,6 +53,8 @@ var components_TableOfContents_TableOfContents = require('./TableOfContents/Tabl
 var components_Footer_Footer = require('./Footer/Footer.js');
 var components_LocalNav_LocalNav = require('./LocalNav/LocalNav.js');
 var components_Navigation_Navigation = require('./Navigation/Navigation.js');
+var components_Card_Card = require('./Card/Card.js');
+var components_Card_CardGroup = require('./Card/CardGroup.js');
 require('../hooks/useGlobalSettings.js');
 require('../AccordionCtx-fe08ff45.js');
 require('@ilo-org/utils');
@@ -65,10 +67,12 @@ require('../css-9c93400b.js');
 require('../utils/transitionEndListener.js');
 require('../utils/triggerBrowserReflow.js');
 require('./Hero/HeroCard.js');
-require('../VideoPlayer-9ce35136.js');
+require('../VideoPlayer-874a52b0.js');
 require('../utils/hoursMinutesSeconds.js');
 require('screenfull');
 require('@ilo-org/icons-react');
+require('./Logo/Logo.js');
+require('./List/ListItem.js');
 
 
 
@@ -117,3 +121,5 @@ exports.TableOfContents = components_TableOfContents_TableOfContents;
 exports.Footer = components_Footer_Footer;
 exports.LocalNav = components_LocalNav_LocalNav;
 exports.Navigation = components_Navigation_Navigation;
+exports.Card = components_Card_Card;
+exports.CardGroup = components_Card_CardGroup;

package/lib/cjs/index.js

@@ -53,6 +53,8 @@ var components_TableOfContents_TableOfContents = require('./components/TableOfCo
 var components_Footer_Footer = require('./components/Footer/Footer.js');
 var components_LocalNav_LocalNav = require('./components/LocalNav/LocalNav.js');
 var components_Navigation_Navigation = require('./components/Navigation/Navigation.js');
+var components_Card_Card = require('./components/Card/Card.js');
+var components_Card_CardGroup = require('./components/Card/CardGroup.js');
 require('./hooks/useGlobalSettings.js');
 require('./AccordionCtx-fe08ff45.js');
 require('@ilo-org/utils');
@@ -65,10 +67,12 @@ require('./css-9c93400b.js');
 require('./utils/transitionEndListener.js');
 require('./utils/triggerBrowserReflow.js');
 require('./components/Hero/HeroCard.js');
-require('./VideoPlayer-9ce35136.js');
+require('./VideoPlayer-874a52b0.js');
 require('./utils/hoursMinutesSeconds.js');
 require('screenfull');
 require('@ilo-org/icons-react');
+require('./components/Logo/Logo.js');
+require('./components/List/ListItem.js');
 
 
 
@@ -117,3 +121,5 @@ exports.TableOfContents = components_TableOfContents_TableOfContents;
 exports.Footer = components_Footer_Footer;
 exports.LocalNav = components_LocalNav_LocalNav;
 exports.Navigation = components_Navigation_Navigation;
+exports.Card = components_Card_Card;
+exports.CardGroup = components_Card_CardGroup;

package/lib/esm/{DailyMotion-66b6eff2.js → DailyMotion-88f6c379.js}

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

package/lib/esm/{Facebook-dbd1003d.js → Facebook-3a284039.js}

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

package/lib/esm/{FilePlayer-617ed2ce.js → FilePlayer-dee1f94b.js}

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

package/lib/esm/{Kaltura-bbcec33d.js → Kaltura-c5d42c88.js}

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

package/lib/esm/{Mixcloud-a681ec69.js → Mixcloud-430ab42a.js}

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

package/lib/esm/{Preview-407cc648.js → Preview-7f57e055.js}

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

package/lib/esm/{SoundCloud-16e78ee5.js → SoundCloud-d1ab591e.js}

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

package/lib/esm/{Streamable-ecb225c1.js → Streamable-042d61d5.js}

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

package/lib/esm/{Twitch-8d1b6769.js → Twitch-2f45534f.js}

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

package/lib/esm/{VideoPlayer-62e0ce79.js → VideoPlayer-719076c4.js}

@@ -639,7 +639,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerYouTube' */
-	    './YouTube-01b3e51f.js').then(function (n) { return n.Y; });
+	    './YouTube-5b29a3d9.js').then(function (n) { return n.Y; });
 	  })
 	}, {
 	  key: 'soundcloud',
@@ -648,7 +648,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerSoundCloud' */
-	    './SoundCloud-16e78ee5.js').then(function (n) { return n.S; });
+	    './SoundCloud-d1ab591e.js').then(function (n) { return n.S; });
 	  })
 	}, {
 	  key: 'vimeo',
@@ -657,7 +657,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerVimeo' */
-	    './Vimeo-faa058a2.js').then(function (n) { return n.V; });
+	    './Vimeo-03b960e6.js').then(function (n) { return n.V; });
 	  })
 	}, {
 	  key: 'facebook',
@@ -666,7 +666,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerFacebook' */
-	    './Facebook-dbd1003d.js').then(function (n) { return n.F; });
+	    './Facebook-3a284039.js').then(function (n) { return n.F; });
 	  })
 	}, {
 	  key: 'streamable',
@@ -675,7 +675,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerStreamable' */
-	    './Streamable-ecb225c1.js').then(function (n) { return n.S; });
+	    './Streamable-042d61d5.js').then(function (n) { return n.S; });
 	  })
 	}, {
 	  key: 'wistia',
@@ -684,7 +684,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerWistia' */
-	    './Wistia-24fb5120.js').then(function (n) { return n.W; });
+	    './Wistia-48f9c303.js').then(function (n) { return n.W; });
 	  })
 	}, {
 	  key: 'twitch',
@@ -693,7 +693,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerTwitch' */
-	    './Twitch-8d1b6769.js').then(function (n) { return n.T; });
+	    './Twitch-2f45534f.js').then(function (n) { return n.T; });
 	  })
 	}, {
 	  key: 'dailymotion',
@@ -702,7 +702,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerDailyMotion' */
-	    './DailyMotion-66b6eff2.js').then(function (n) { return n.D; });
+	    './DailyMotion-88f6c379.js').then(function (n) { return n.D; });
 	  })
 	}, {
 	  key: 'mixcloud',
@@ -711,7 +711,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerMixcloud' */
-	    './Mixcloud-a681ec69.js').then(function (n) { return n.M; });
+	    './Mixcloud-430ab42a.js').then(function (n) { return n.M; });
 	  })
 	}, {
 	  key: 'vidyard',
@@ -720,7 +720,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerVidyard' */
-	    './Vidyard-57e2834a.js').then(function (n) { return n.V; });
+	    './Vidyard-4625527b.js').then(function (n) { return n.V; });
 	  })
 	}, {
 	  key: 'kaltura',
@@ -729,7 +729,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerKaltura' */
-	    './Kaltura-bbcec33d.js').then(function (n) { return n.K; });
+	    './Kaltura-c5d42c88.js').then(function (n) { return n.K; });
 	  })
 	}, {
 	  key: 'file',
@@ -741,7 +741,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerFilePlayer' */
-	    './FilePlayer-617ed2ce.js').then(function (n) { return n.F; });
+	    './FilePlayer-dee1f94b.js').then(function (n) { return n.F; });
 	  })
 	}];
 	exports["default"] = _default;
@@ -814,7 +814,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') {
@@ -879,8 +879,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;
@@ -1661,7 +1666,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Preview = /*#__PURE__*/(0, _react.lazy)(function () {
   return import(
   /* webpackChunkName: 'reactPlayerPreview' */
-  './Preview-407cc648.js').then(function (n) { return n.P; });
+  './Preview-7f57e055.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;

package/lib/esm/{Vidyard-57e2834a.js → Vidyard-4625527b.js}

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

package/lib/esm/{Vimeo-faa058a2.js → Vimeo-03b960e6.js}

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

package/lib/esm/{Wistia-24fb5120.js → Wistia-48f9c303.js}

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

package/lib/esm/{YouTube-01b3e51f.js → YouTube-5b29a3d9.js}

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

package/lib/esm/components/Card/Card.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import Link from '../Link/Link.js';
+import List from '../List/List.js';
+import ListItem from '../List/ListItem.js';
+import LinkList from '../LinkList/LinkList.js';
+import Profile from '../Profile/Profile.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../../ListCtx-da435fdf.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 } = 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 (jsxs("div", Object.assign({ className: cardClasses }, { children: [link &&
+                variant != "data" &&
+                variant != "factlist" &&
+                variant != "stat" && (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}--image`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), (variant == "multilink" || (variant == "data" && image)) && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date &&
+                                variant != "stat" &&
+                                variant != "data" &&
+                                variant != "graphicpromo" &&
+                                variant != "factlist" && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsx("p", Object.assign({ className: `${baseClass}--event-date` }, { children: eventdetails }))), profile && profile.avatar && (jsx(Profile, { avatar: profile.avatar, description: profile.description, link: profile.link, name: profile.name, role: profile.role, className: `${prefix}--profile--contents--${theme}` })), listitems && (jsx(List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: listitems.map((item, index) => (jsx(ListItem, Object.assign({ id: `list${index}` }, { children: jsx("p", { children: item }) })))) }))), cta && cta.label && (jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--primary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "link__label" }, { children: cta.label })) }))), source && (jsx(Link, Object.assign({ theme: theme, url: source.url }, { children: source.label }))), linklist && (jsx(LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup })), dataset &&
+                                dataset.content &&
+                                dataset.content.items &&
+                                dataset.content.items.map((item) => (jsxs(Fragment, { children: [jsx("p", Object.assign({ className: `${baseClass}--data--content-label` }, { children: item.label })), jsx("p", Object.assign({ className: `${baseClass}--data--content-copy` }, { children: item.copy }))] }))), dataset && dataset.files && (jsxs("div", Object.assign({ className: `${baseClass}--data--content-files` }, { children: [jsx("p", Object.assign({ className: `${baseClass}--data--content-label` }, { children: dataset.files.headline })), dataset.files.items &&
+                                        dataset.files.items.map((item) => (jsx("a", Object.assign({ className: `${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`, href: item.url, download: true }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: item.label })) }))))] }))), dataset && dataset.links && (jsxs("div", Object.assign({ className: `${baseClass}--data--content-links` }, { children: [jsx("p", Object.assign({ className: `${baseClass}--data--content-label` }, { children: dataset.links.headline })), dataset.links.items &&
+                                        dataset.links.items.map((item) => (jsxs(Fragment, { children: [jsx(Link, Object.assign({ url: item.url }, { children: item.label })), jsx("span", { children: "\u00A0\u00A0" })] })))] })))] }))] }))] })));
+};
+
+export { Card as default };

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

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import Card from './Card.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../Link/Link.js';
+import '../List/List.js';
+import '../../ListCtx-da435fdf.js';
+import '../List/ListItem.js';
+import '../LinkList/LinkList.js';
+import '../Profile/Profile.js';
+
+const CardGroup = ({ cards, cardcount, cta }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--cardgroup`;
+    const cardGroupClasses = classNames(baseClass, `${baseClass}--${cardcount}`);
+    return (jsx("div", Object.assign({ className: cardGroupClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [cards &&
+                    cards.map((card) => (jsx(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 && (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 })) })) })))] })) })));
+};
+
+export { CardGroup as default };

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

@@ -0,0 +1,14 @@
+export { default as Card } from './Card.js';
+export { default as CardGroup } from './CardGroup.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../Link/Link.js';
+import '../List/List.js';
+import '../../ListCtx-da435fdf.js';
+import '../List/ListItem.js';
+import '../LinkList/LinkList.js';
+import '../Profile/Profile.js';

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

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import ContextMenu from '../ContextMenu/ContextMenu.js';
 import classNames from 'classnames';
+import Logo from '../Logo/Logo.js';
 import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
 
@@ -75,7 +76,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 } = useGlobalSettings();
     const [toggleMenuOpen, setMenuToggleOpen] = useState(false);
     const [toggleLanguageOpen, setLanguageToggleOpen] = useState(false);
@@ -91,8 +93,8 @@ const LocalNav = ({ background, logo, siteurl, primarynav, mainlink, menuclosela
     const handleLanguageToggle = () => {
         setLanguageToggleOpen(!toggleLanguageOpen);
     };
-    return (jsx("header", Object.assign({ className: localNavClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--utility-bar ${baseClass}--utility-bar--local`, style: { background: bg } }, { children: [jsxs("nav", Object.assign({ className: `${prefix}--nav--local` }, { children: [jsx("div", Object.assign({ className: `${prefix}--nav--local--logo-wrapper` }, { children: jsx("a", Object.assign({ href: siteurl, className: `${prefix}--nav--local--logo-link` }, { children: jsx("img", { src: logo, alt: "ILO Logo", className: `${prefix}--nav--local--logo` }) })) })), jsx("ul", Object.assign({ className: `${prefix}--nav--local--set` }, { children: (primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
-                                primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--local--item` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--local--link` }, { children: jsx("span", { children: item.label }) })) }), index))) }))] })), jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [mainlink && (jsx("span", Object.assign({ className: `${prefix}--language-switcher--link--wrap` }, { children: jsx("a", Object.assign({ href: mainlink.url, className: `${prefix}--language-switcher--link` }, { children: mainlink.label })) }))), jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsx(ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })), jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: "Menu" })), jsx("div", Object.assign({ className: `${baseClass}--navigation` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", { className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: "Close" })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
+    return (jsx("header", Object.assign({ className: localNavClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--utility-bar ${baseClass}--utility-bar--local`, style: { background: bg } }, { children: [jsxs("nav", Object.assign({ className: `${prefix}--nav--local` }, { children: [jsx("div", Object.assign({ className: `${prefix}--nav--local--logo-wrapper` }, { children: jsx(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 }) })), jsx("ul", Object.assign({ className: `${prefix}--nav--local--set` }, { children: (primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
+                                primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--local--item` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--local--link` }, { children: jsx("span", { children: item.label }) })) }), index))) }))] })), jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [mainlink && (jsx("span", Object.assign({ className: `${prefix}--language-switcher--link--wrap` }, { children: jsx("a", Object.assign({ href: mainlink.url, className: `${prefix}--language-switcher--link` }, { children: mainlink.label })) }))), jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsx(ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })), jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: "Menu" })), jsx("div", Object.assign({ className: `${baseClass}--navigation` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsx(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 }), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", { className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: "Close" })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
                                                         languagecontextmenu.links.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link ${prefix}--nav--language` }, { children: item.label })) }), index))) }))] })) }))] })), jsxs("nav", Object.assign({ className: `${prefix}--nav`, "aria-labelledby": "primary-navigation" }, { children: [jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "primary-navigation" }, { children: primarynav === null || primarynav === void 0 ? void 0 : primarynav.navlabel })), jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
                                             primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))) }))] }))] })) }))] })) })));
 };

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

@@ -6,3 +6,4 @@ import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../ContextMenu/ContextMenu.js';
 import 'classnames';
+import '../Logo/Logo.js';

package/lib/esm/components/Logo/Logo.js

@@ -0,0 +1,151 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import classNames from 'classnames';
+import '../../GlobalCtx-7fb23cfa.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 = __rest(_a, ["baseClass", "className", "subbrand", "alt", "src", "style", "size", "theme"]);
+    // The logo image element
+    const imageRef = useRef(null);
+    // The lockup container
+    const lockupRef = useRef(null);
+    // The lockup text
+    const lockupTextRef = useRef(null);
+    // Has the image loaded or not
+    const [imageLoaded, setImageLoaded] = useState(false);
+    // Dynamic height of the image
+    const [imageHeight, setImageHeight] = useState(0);
+    // Ratio of the font size to the height of the logo image
+    const [fontSizeRatio, setfontSizeRatio] = useState(0);
+    // Is the logo visible? Default to true if not a subbrand
+    const [isLogoVisible, setIsLogoVisible] = useState(!subbrand);
+    // Initial height of the image when it's loaded
+    const initialImageHeight = 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 = 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
+    useEffect(() => {
+        if (subbrand && imageLoaded && fontSizeRatio) {
+            setIsLogoVisible(true);
+        }
+    }, [imageLoaded, fontSizeRatio, subbrand]);
+    // Set up the Resize observer to watch the image
+    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
+    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
+    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 (jsxs("figure", Object.assign({ className: classNames$1, style: getStyle() }, { children: [jsx("img", Object.assign({ ref: imageRef, alt: alt, src: getImageSrc(), className: classNames({
+                    [subBrandImageClass]: hasSubbrand,
+                    [noSubBrandImageClass]: !hasSubbrand,
+                }), onLoad: handleImageLoaded }, props)), hasSubbrand && (jsxs("div", Object.assign({ ref: lockupRef, className: `${subBrandClass}--lock-up` }, { children: [jsx("span", { className: `${subBrandClass}--lock-up--separator` }), jsx("span", Object.assign({ ref: lockupTextRef }, { children: subbrand }))] })))] })));
+};
+const Logo = (_a) => {
+    var { className, url, target, style, size } = _a, props = __rest(_a, ["className", "url", "target", "style", "size"]);
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--logo`;
+    const linkClass = `${baseClass}--link`;
+    const fluidClass = `${baseClass}--size--fluid`;
+    if (url) {
+        return (jsx("a", Object.assign({ href: url, target: target, className: classNames(linkClass, className, {
+                [fluidClass]: size === "fluid",
+            }), style: style }, { children: jsx(BaseLogo, Object.assign({}, props, { baseClass: baseClass, size: size })) })));
+    }
+    return (jsx(BaseLogo, Object.assign({ baseClass: baseClass, className: className, style: style, size: size }, props)));
+};
+
+export { Logo as default };

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

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

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-62e0ce79.js';
+import { V as VideoPlayer } from '../../VideoPlayer-719076c4.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';

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

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import 'react';
-export { V as default } from '../../VideoPlayer-62e0ce79.js';
+export { V as default } from '../../VideoPlayer-719076c4.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-62e0ce79.js';
+import '../../VideoPlayer-719076c4.js';
 import '../../index-8ebb2cc1.js';
 import 'react-dom';
 import '../../utils/hoursMinutesSeconds.js';