@ilo-org/react 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @ilo-org/react
 
+## 0.7.1
+
+### Patch Changes
+
+- Updated dependencies [ba46a3a7d]
+- Updated dependencies [bdeca8720]
+- Updated dependencies [bbd9262d1]
+- Updated dependencies [ee14cd3d3]
+- Updated dependencies [b56d55cfd]
+- Updated dependencies [5022dfc4c]
+- Updated dependencies [bacc0bba7]
+- Updated dependencies [ba46a3a7d]
+- Updated dependencies [652966ab7]
+  - @ilo-org/styles@0.7.0
+
+## 0.7.0
+
+### Minor Changes
+
+- c0648530f: Accordion items can now be made scrollable by passing `scroll: true` to the Accordion Panel component.
+- 0dc9a8538: Add LogoGrid component which shows a list of logos with an optional link
+
+### Patch Changes
+
+- 77517f4dc: Refactor Hero and HeroCard to sync with new implemenation in Twig and Styles packages
+- Updated dependencies [c0648530f]
+- Updated dependencies [0dc9a8538]
+  - @ilo-org/styles@0.6.0
+
 ## 0.6.0
 
 ### Minor Changes

package/lib/cjs/components/Accordion/AccordionPanel.js

@@ -9,15 +9,15 @@ var AccordionCtx = require('../../AccordionCtx-fe08ff45.js');
 require('../../GlobalCtx-97e4b433.js');
 
 const AccordionPanel = (_a) => {
-    var { children, className, timeout = 600 } = _a, rest = tslib.__rest(_a, ["children", "className", "timeout"]);
+    var { children, className, scroll } = _a, rest = tslib.__rest(_a, ["children", "className", "scroll"]);
     const { activeItems } = require$$0.useContext(AccordionCtx.AccordionContext);
     const { id } = require$$0.useContext(AccordionCtx.AccordionItemContext);
     const [panelHeight, setPanelHeight] = require$$0.useState(0);
     const open = activeItems.indexOf(id) > -1;
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--accordion--panel`;
-    const accordionaPanelClasses = classNames(className, {
-        [baseClass]: true,
+    const accordionaPanelClasses = classNames(className, baseClass, {
+        [`${baseClass}__scroll`]: scroll,
         [`${baseClass}--open`]: open,
     });
     const ref = require$$0.useRef();

package/lib/cjs/components/Hero/Hero.js

@@ -4,22 +4,32 @@ var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_Hero_HeroCard = require('./HeroCard.js');
-var components_Image_Image = require('../Image/Image.js');
+var components_Breadcrumb_Breadcrumb = require('../Breadcrumb/Breadcrumb.js');
+var components_Tooltip_Tooltip = require('../Tooltip/Tooltip.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
-require('../Credit/Credit.js');
+require('../SocialMedia/SocialMedia.js');
+require('../SocialMedia/index.js');
+require('../ContextMenu/ContextMenu.js');
+require('react-dom');
 
-const Hero = ({ className, image, heroCard, theme = "light", types, }) => {
+const HeroImage = ({ url, alt }) => {
     const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--hero`;
-    const heroClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}--${theme}`]: theme,
-        [`${baseClass}--${types}`]: types,
-        [`${baseClass}--image`]: image,
-    });
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", Object.assign({ className: heroClasses }, { children: [image && jsxRuntime.jsx(components_Image_Image, Object.assign({}, image)), jsxRuntime.jsx(components_Hero_HeroCard, Object.assign({}, heroCard))] })) }));
+    const imageClass = `${prefix}--card--image`;
+    // Sort the urls by breakpoint
+    const sortedUrls = url.sort((a, b) => a.breakpoint - b.breakpoint);
+    const defaultSrc = sortedUrls[sortedUrls.length - 1].src;
+    return (jsxRuntime.jsx("figure", Object.assign({ className: "hero--figure" }, { children: jsxRuntime.jsxs("picture", { children: [sortedUrls.map((img) => (jsxRuntime.jsx("source", { srcSet: img.src, media: `(min-width: ${img.breakpoint}px)` }, img.breakpoint))), jsxRuntime.jsx("img", { className: imageClass, src: defaultSrc, alt: alt })] }) })));
+};
+const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", image, breadcrumb, heroCard, caption, }) => {
+    const baseClass = "hero";
+    const justifyClass = `${baseClass}__card-justify__${justify}`;
+    const alignClass = `${baseClass}__card-align__${align}`;
+    const cardSizeClass = `${baseClass}__card-size__${cardSize}`;
+    const posterSizeClass = `${baseClass}__poster-size__${posterSize}`;
+    const heroClasses = classNames(baseClass, justifyClass, alignClass, cardSizeClass, posterSizeClass);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: heroClasses }, { children: [image ? jsxRuntime.jsx(HeroImage, Object.assign({}, image)) : jsxRuntime.jsx("div", { className: "hero--figure" }), breadcrumb && (jsxRuntime.jsx("div", Object.assign({ className: "hero--breadcrumbs" }, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--breadcrumbs--wrapper" }, { children: jsxRuntime.jsx(components_Breadcrumb_Breadcrumb, Object.assign({}, breadcrumb)) })) }))), jsxRuntime.jsx("div", Object.assign({ className: "hero--card" }, { children: jsxRuntime.jsx(components_Hero_HeroCard, Object.assign({}, heroCard)) })), caption && (jsxRuntime.jsx("div", Object.assign({ className: "hero--caption" }, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--caption--wrapper" }, { children: jsxRuntime.jsx(components_Tooltip_Tooltip, Object.assign({}, caption)) })) })))] })));
 };
 
 module.exports = Hero;

package/lib/cjs/components/Hero/HeroCard.js

@@ -3,23 +3,33 @@
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_SocialMedia_SocialMedia = require('../SocialMedia/SocialMedia.js');
+require('../SocialMedia/index.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
 
-const HeroCard = ({ className, alignment, datecopy, eyebrow, intro, socials, title, theme = "light", types = "article", }) => {
+const HeroCardTitle = ({ baseclass, title, url }) => {
+    const titleClass = `${baseclass}--title`;
+    const linkClass = `${baseclass}--title-link`;
+    if (!url) {
+        return jsxRuntime.jsx("h1", Object.assign({ className: titleClass }, { children: title }));
+    }
+    return (jsxRuntime.jsx("a", Object.assign({ className: linkClass, href: url }, { children: jsxRuntime.jsx("h1", Object.assign({ className: titleClass }, { children: title })) })));
+};
+const HeroCard = ({ theme = "dark", background = "solid", cornercut = "true", eyebrow, title, url, datecopy, intro, socialmedia, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--hero-card`;
-    const heroCardClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}--${alignment}`]: alignment,
-        [`${baseClass}--${theme}`]: theme,
-        [`${baseClass}--${types}`]: types,
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const backgroundClass = `${baseClass}__background__${background}`;
+    const cornercutClass = `${baseClass}__cornercut`;
+    const heroCardClasses = classNames(baseClass, themeClass, backgroundClass, {
+        [cornercutClass]: cornercut,
     });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: heroCardClasses }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h2", Object.assign({ className: `${baseClass}--title` }, { children: title })), datecopy && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--datecopy` }, { children: datecopy })), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: socials &&
-                    socials.map((item, index) => {
-                        return (jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--list--item` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link icon icon--${item.icon}`, href: item.url, title: item.label }, { children: item.label })) }), index));
-                    }) }))] })));
+    const eyebrowClass = `${baseClass}--eyebrow`;
+    const datecopyClass = `${baseClass}--datecopy`;
+    const introClass = `${baseClass}--intro`;
+    return (jsxRuntime.jsxs("div", Object.assign({ className: heroCardClasses }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: eyebrowClass }, { children: eyebrow })), jsxRuntime.jsx(HeroCardTitle, { baseclass: baseClass, title: title, url: url }), datecopy && jsxRuntime.jsx("p", Object.assign({ className: datecopyClass }, { children: datecopy })), intro && jsxRuntime.jsx("p", Object.assign({ className: introClass }, { children: intro })), socialmedia && jsxRuntime.jsx(components_SocialMedia_SocialMedia, Object.assign({}, socialmedia, { theme: theme }))] })));
 };
 
 module.exports = HeroCard;

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

@@ -8,8 +8,12 @@ require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
-require('../Image/Image.js');
-require('../Credit/Credit.js');
+require('../Breadcrumb/Breadcrumb.js');
+require('../ContextMenu/ContextMenu.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+require('../SocialMedia/SocialMedia.js');
+require('../SocialMedia/index.js');
 
 
 

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

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+require('react');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+
+const LogoGridItem = ({ url, label, src }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const itemClass = `${prefix}--logo-grid--item`;
+    const itemLinkClass = `${prefix}--logo-grid--link`;
+    const gridItemClass = classNames(itemClass, {
+        [itemLinkClass]: !!url,
+    });
+    if (!url) {
+        return (jsxRuntime.jsx("div", Object.assign({ className: gridItemClass }, { children: jsxRuntime.jsx("img", { alt: label, src: src }) })));
+    }
+    return (jsxRuntime.jsx("a", Object.assign({ className: gridItemClass, href: url, target: "_blank", rel: "noopener noreferrer" }, { children: jsxRuntime.jsx("img", { alt: label, src: src }) })));
+};
+const LogoGrid = ({ logos, theme = "light" }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--logo-grid`;
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const logoGridClass = classNames(baseClass, themeClass);
+    return (jsxRuntime.jsx("div", Object.assign({ className: logoGridClass }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--logos` }, { children: logos.map((logo) => (jsxRuntime.jsx(LogoGridItem, Object.assign({}, logo)))) })) })));
+};
+
+module.exports = LogoGrid;

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

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

package/lib/cjs/components/index.js

@@ -38,6 +38,7 @@ var components_Checkbox_Checkbox = require('./Checkbox/Checkbox.js');
 var components_DatePicker_DatePicker = require('./DatePicker/DatePicker.js');
 var components_Form_Form = require('./Form/Form.js');
 var components_Hero_Hero = require('./Hero/Hero.js');
+require('./SocialMedia/index.js');
 var components_LinkList_LinkList = require('./LinkList/LinkList.js');
 var components_Pagination_Pagination = require('./Pagination/Pagination.js');
 var components_SearchField_SearchField = require('./SearchField/SearchField.js');
@@ -68,12 +69,11 @@ require('../css-9c93400b.js');
 require('../utils/transitionEndListener.js');
 require('../utils/triggerBrowserReflow.js');
 require('./Hero/HeroCard.js');
+require('./SocialMedia/SocialMedia.js');
 require('../VideoPlayer-d576de50.js');
 require('../utils/hoursMinutesSeconds.js');
 require('screenfull');
 require('@ilo-org/icons-react');
-require('./SocialMedia/SocialMedia.js');
-require('./SocialMedia/index.js');
 require('./Logo/Logo.js');
 require('./List/ListItem.js');
 

package/lib/cjs/index.js

@@ -38,6 +38,7 @@ var components_Checkbox_Checkbox = require('./components/Checkbox/Checkbox.js');
 var components_DatePicker_DatePicker = require('./components/DatePicker/DatePicker.js');
 var components_Form_Form = require('./components/Form/Form.js');
 var components_Hero_Hero = require('./components/Hero/Hero.js');
+require('./components/SocialMedia/index.js');
 var components_LinkList_LinkList = require('./components/LinkList/LinkList.js');
 var components_Pagination_Pagination = require('./components/Pagination/Pagination.js');
 var components_SearchField_SearchField = require('./components/SearchField/SearchField.js');
@@ -69,11 +70,10 @@ require('./utils/transitionEndListener.js');
 require('./utils/triggerBrowserReflow.js');
 require('@ilo-org/icons-react');
 require('./components/Hero/HeroCard.js');
+require('./components/SocialMedia/SocialMedia.js');
 require('./VideoPlayer-d576de50.js');
 require('./utils/hoursMinutesSeconds.js');
 require('screenfull');
-require('./components/SocialMedia/SocialMedia.js');
-require('./components/SocialMedia/index.js');
 require('./components/Logo/Logo.js');
 require('./components/List/ListItem.js');
 

package/lib/esm/components/Accordion/AccordionPanel.js

@@ -7,15 +7,15 @@ import { A as AccordionContext, a as AccordionItemContext } from '../../Accordio
 import '../../GlobalCtx-7fb23cfa.js';
 
 const AccordionPanel = (_a) => {
-    var { children, className, timeout = 600 } = _a, rest = __rest(_a, ["children", "className", "timeout"]);
+    var { children, className, scroll } = _a, rest = __rest(_a, ["children", "className", "scroll"]);
     const { activeItems } = useContext(AccordionContext);
     const { id } = useContext(AccordionItemContext);
     const [panelHeight, setPanelHeight] = useState(0);
     const open = activeItems.indexOf(id) > -1;
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--accordion--panel`;
-    const accordionaPanelClasses = classNames(className, {
-        [baseClass]: true,
+    const accordionaPanelClasses = classNames(className, baseClass, {
+        [`${baseClass}__scroll`]: scroll,
         [`${baseClass}--open`]: open,
     });
     const ref = useRef();

package/lib/esm/components/Hero/Hero.js

@@ -1,23 +1,33 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import HeroCard from './HeroCard.js';
-import Image from '../Image/Image.js';
+import Breadcrumb from '../Breadcrumb/Breadcrumb.js';
+import Tooltip from '../Tooltip/Tooltip.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../Credit/Credit.js';
+import '../SocialMedia/SocialMedia.js';
+import '../SocialMedia/index.js';
+import '../ContextMenu/ContextMenu.js';
+import 'react-dom';
 
-const Hero = ({ className, image, heroCard, theme = "light", types, }) => {
+const HeroImage = ({ url, alt }) => {
     const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--hero`;
-    const heroClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}--${theme}`]: theme,
-        [`${baseClass}--${types}`]: types,
-        [`${baseClass}--image`]: image,
-    });
-    return (jsx(Fragment, { children: jsxs("div", Object.assign({ className: heroClasses }, { children: [image && jsx(Image, Object.assign({}, image)), jsx(HeroCard, Object.assign({}, heroCard))] })) }));
+    const imageClass = `${prefix}--card--image`;
+    // Sort the urls by breakpoint
+    const sortedUrls = url.sort((a, b) => a.breakpoint - b.breakpoint);
+    const defaultSrc = sortedUrls[sortedUrls.length - 1].src;
+    return (jsx("figure", Object.assign({ className: "hero--figure" }, { children: jsxs("picture", { children: [sortedUrls.map((img) => (jsx("source", { srcSet: img.src, media: `(min-width: ${img.breakpoint}px)` }, img.breakpoint))), jsx("img", { className: imageClass, src: defaultSrc, alt: alt })] }) })));
+};
+const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", image, breadcrumb, heroCard, caption, }) => {
+    const baseClass = "hero";
+    const justifyClass = `${baseClass}__card-justify__${justify}`;
+    const alignClass = `${baseClass}__card-align__${align}`;
+    const cardSizeClass = `${baseClass}__card-size__${cardSize}`;
+    const posterSizeClass = `${baseClass}__poster-size__${posterSize}`;
+    const heroClasses = classNames(baseClass, justifyClass, alignClass, cardSizeClass, posterSizeClass);
+    return (jsxs("div", Object.assign({ className: heroClasses }, { children: [image ? jsx(HeroImage, Object.assign({}, image)) : jsx("div", { className: "hero--figure" }), breadcrumb && (jsx("div", Object.assign({ className: "hero--breadcrumbs" }, { children: jsx("div", Object.assign({ className: "hero--breadcrumbs--wrapper" }, { children: jsx(Breadcrumb, Object.assign({}, breadcrumb)) })) }))), jsx("div", Object.assign({ className: "hero--card" }, { children: jsx(HeroCard, Object.assign({}, heroCard)) })), caption && (jsx("div", Object.assign({ className: "hero--caption" }, { children: jsx("div", Object.assign({ className: "hero--caption--wrapper" }, { children: jsx(Tooltip, Object.assign({}, caption)) })) })))] })));
 };
 
 export { Hero as default };

package/lib/esm/components/Hero/HeroCard.js

@@ -1,23 +1,33 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import SocialMedia from '../SocialMedia/SocialMedia.js';
+import '../SocialMedia/index.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 
-const HeroCard = ({ className, alignment, datecopy, eyebrow, intro, socials, title, theme = "light", types = "article", }) => {
+const HeroCardTitle = ({ baseclass, title, url }) => {
+    const titleClass = `${baseclass}--title`;
+    const linkClass = `${baseclass}--title-link`;
+    if (!url) {
+        return jsx("h1", Object.assign({ className: titleClass }, { children: title }));
+    }
+    return (jsx("a", Object.assign({ className: linkClass, href: url }, { children: jsx("h1", Object.assign({ className: titleClass }, { children: title })) })));
+};
+const HeroCard = ({ theme = "dark", background = "solid", cornercut = "true", eyebrow, title, url, datecopy, intro, socialmedia, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--hero-card`;
-    const heroCardClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}--${alignment}`]: alignment,
-        [`${baseClass}--${theme}`]: theme,
-        [`${baseClass}--${types}`]: types,
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const backgroundClass = `${baseClass}__background__${background}`;
+    const cornercutClass = `${baseClass}__cornercut`;
+    const heroCardClasses = classNames(baseClass, themeClass, backgroundClass, {
+        [cornercutClass]: cornercut,
     });
-    return (jsxs("div", Object.assign({ className: heroCardClasses }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h2", Object.assign({ className: `${baseClass}--title` }, { children: title })), datecopy && jsx("p", Object.assign({ className: `${baseClass}--datecopy` }, { children: datecopy })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: socials &&
-                    socials.map((item, index) => {
-                        return (jsx("li", Object.assign({ className: `${baseClass}--list--item` }, { children: jsx("a", Object.assign({ className: `${baseClass}--link icon icon--${item.icon}`, href: item.url, title: item.label }, { children: item.label })) }), index));
-                    }) }))] })));
+    const eyebrowClass = `${baseClass}--eyebrow`;
+    const datecopyClass = `${baseClass}--datecopy`;
+    const introClass = `${baseClass}--intro`;
+    return (jsxs("div", Object.assign({ className: heroCardClasses }, { children: [eyebrow && jsx("p", Object.assign({ className: eyebrowClass }, { children: eyebrow })), jsx(HeroCardTitle, { baseclass: baseClass, title: title, url: url }), datecopy && jsx("p", Object.assign({ className: datecopyClass }, { children: datecopy })), intro && jsx("p", Object.assign({ className: introClass }, { children: intro })), socialmedia && jsx(SocialMedia, Object.assign({}, socialmedia, { theme: theme }))] })));
 };
 
 export { HeroCard as default };

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

@@ -6,5 +6,9 @@ import '../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../Image/Image.js';
-import '../Credit/Credit.js';
+import '../Breadcrumb/Breadcrumb.js';
+import '../ContextMenu/ContextMenu.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+import '../SocialMedia/SocialMedia.js';
+import '../SocialMedia/index.js';

package/lib/esm/components/LogoGrid/LogoGrid.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import 'react';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const LogoGridItem = ({ url, label, src }) => {
+    const { prefix } = useGlobalSettings();
+    const itemClass = `${prefix}--logo-grid--item`;
+    const itemLinkClass = `${prefix}--logo-grid--link`;
+    const gridItemClass = classNames(itemClass, {
+        [itemLinkClass]: !!url,
+    });
+    if (!url) {
+        return (jsx("div", Object.assign({ className: gridItemClass }, { children: jsx("img", { alt: label, src: src }) })));
+    }
+    return (jsx("a", Object.assign({ className: gridItemClass, href: url, target: "_blank", rel: "noopener noreferrer" }, { children: jsx("img", { alt: label, src: src }) })));
+};
+const LogoGrid = ({ logos, theme = "light" }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--logo-grid`;
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const logoGridClass = classNames(baseClass, themeClass);
+    return (jsx("div", Object.assign({ className: logoGridClass }, { children: jsx("div", Object.assign({ className: `${baseClass}--logos` }, { children: logos.map((logo) => (jsx(LogoGridItem, Object.assign({}, logo)))) })) })));
+};
+
+export { LogoGrid as default };

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

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

package/lib/esm/components/index.js

@@ -36,6 +36,7 @@ export { default as Checkbox } from './Checkbox/Checkbox.js';
 export { default as DatePicker } from './DatePicker/DatePicker.js';
 export { default as Form } from './Form/Form.js';
 export { default as Hero } from './Hero/Hero.js';
+import './SocialMedia/index.js';
 export { default as LinkList } from './LinkList/LinkList.js';
 export { default as Pagination } from './Pagination/Pagination.js';
 export { default as SearchField } from './SearchField/SearchField.js';
@@ -66,11 +67,10 @@ import '../css-7414f50b.js';
 import '../utils/transitionEndListener.js';
 import '../utils/triggerBrowserReflow.js';
 import './Hero/HeroCard.js';
+import './SocialMedia/SocialMedia.js';
 import '../VideoPlayer-a5fa87ce.js';
 import '../utils/hoursMinutesSeconds.js';
 import 'screenfull';
 import '@ilo-org/icons-react';
-import './SocialMedia/SocialMedia.js';
-import './SocialMedia/index.js';
 import './Logo/Logo.js';
 import './List/ListItem.js';

package/lib/esm/index.js

@@ -36,6 +36,7 @@ export { default as Checkbox } from './components/Checkbox/Checkbox.js';
 export { default as DatePicker } from './components/DatePicker/DatePicker.js';
 export { default as Form } from './components/Form/Form.js';
 export { default as Hero } from './components/Hero/Hero.js';
+import './components/SocialMedia/index.js';
 export { default as LinkList } from './components/LinkList/LinkList.js';
 export { default as Pagination } from './components/Pagination/Pagination.js';
 export { default as SearchField } from './components/SearchField/SearchField.js';
@@ -67,10 +68,9 @@ import './utils/transitionEndListener.js';
 import './utils/triggerBrowserReflow.js';
 import '@ilo-org/icons-react';
 import './components/Hero/HeroCard.js';
+import './components/SocialMedia/SocialMedia.js';
 import './VideoPlayer-a5fa87ce.js';
 import './utils/hoursMinutesSeconds.js';
 import 'screenfull';
-import './components/SocialMedia/SocialMedia.js';
-import './components/SocialMedia/index.js';
 import './components/Logo/Logo.js';
 import './components/List/ListItem.js';

package/lib/types/react/src/components/Accordion/AccordionPanel.props.d.ts

@@ -14,4 +14,8 @@ export default interface AccordionPanelProps {
      * events are canceled
      */
     timeout?: number;
+    /**
+     * Allows the AccordionPanel to be scrollable by default
+     */
+    scroll?: boolean;
 }

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

@@ -1,4 +1,4 @@
-import { CardAlignment, HeroCardTheme, CardCornerType, CardColor, CardSize, CardTypes } from "../../types";
+import { CardAlignment, ThemeTypes, CardCornerType, CardColor, CardSize, CardTypes } from "../../types";
 import { LinkProps, LinkListProps } from "../LinkList/LinkList.props";
 import { ProfileProps } from "../Profile/Profile.props";
 export interface CardProps {
@@ -21,7 +21,7 @@ export interface CardProps {
     /**
      * The theme type for the card. Theme doesn't apply to these card types: Multilink, Data, Stat and Detail. Possible themes: light | dark.
      */
-    theme?: HeroCardTheme;
+    theme?: ThemeTypes;
     /**
      * Different variations of card: Graphic | Stat | Graphic Promo | Multilink | Feature | Detail | Fact List | Data.
      */

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

@@ -1,7 +1,25 @@
-import { HeroCardTheme, HeroCardTypes } from "../../types";
+import { ThemeTypes } from "../../types";
+import { BreadcrumbProps } from "../Breadcrumb/Breadcrumb.props";
 import { ImageProps } from "../Image/Image.props";
+import { TooltipProps } from "../Tooltip/Tooltip.props";
 import { HeroCardProps } from "./HeroCard.props";
 export interface HeroProps {
+    /**
+     * Vertical alignment of the hero card
+     */
+    align?: "center" | "bottom" | "baseline";
+    /**
+     * Props to pass to the breadcrumb if there is one
+     */
+    breadcrumb?: BreadcrumbProps;
+    /**
+     * Caption to render in the hero card
+     */
+    caption?: TooltipProps;
+    /**
+     * Size the of hero card
+     */
+    cardSize?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
     /**
      * Specify an optional className to be added to your Hero component.
      */
@@ -10,16 +28,20 @@ export interface HeroProps {
      * Props for the image for the hero
      */
     image?: ImageProps;
+    /**
+     * How to justify the hero card
+     */
+    justify?: "start" | "center" | "offset";
     /**
      * Props for the card for the hero
      */
-    heroCard?: HeroCardProps;
+    heroCard: HeroCardProps;
     /**
-     * Theme for the card
+     * The size of the poster image
      */
-    theme?: HeroCardTheme;
+    posterSize?: "small" | "medium" | "large" | "xlarge";
     /**
-     * Type of hero for the card
+     * Theme for the card
      */
-    types?: HeroCardTypes;
+    theme?: ThemeTypes;
 }

package/lib/types/react/src/components/Hero/HeroCard.props.d.ts

@@ -1,13 +1,18 @@
-import { HeroCardAlignment, HeroCardTypes, HeroCardTheme } from "../../types";
+import { ThemeTypes } from "../../types";
+import { SocialMediaProps } from "../SocialMedia";
 export interface HeroCardProps {
     /**
-     * Theme for the card
+     * Specify whether the background should be solid, transparent or semi-transparent
      */
-    alignment?: HeroCardAlignment;
+    background?: "solid" | "transparent" | "semi-transparent";
     /**
      * Specify an optional className to be added to your Hero component.
      */
     className?: string;
+    /**
+     * Whether the card should have a cornercut or not
+     */
+    cornercut?: boolean;
     /**
      * date copy for the hero card
      */
@@ -23,32 +28,17 @@ export interface HeroCardProps {
     /**
      * Specify the links to be displayed in this link group
      */
-    socials?: SocialProps[];
+    socialmedia?: SocialMediaProps;
     /**
      * Title for the page
      */
-    title?: string;
+    title: string;
     /**
      * Theme for the card
      */
-    theme?: HeroCardTheme;
-    /**
-     * Type of hero for the card
-     */
-    types?: HeroCardTypes;
-}
-interface SocialProps {
-    /**
-     * Specify the label for this link
-     */
-    label?: Required<string>;
-    /**
-     * Specify the url for this link
-     */
-    url?: Required<string>;
+    theme?: ThemeTypes;
     /**
-     * Specify the icon for this link
+     * The link of the card's title if it has one
      */
-    icon?: Required<string>;
+    url?: string;
 }
-export {};

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

@@ -2,11 +2,11 @@ interface ImageUrl {
     /**
      * Specify the breakpoint at which this image src should be used
      */
-    breakpoint?: number;
+    breakpoint: number;
     /**
      * Specify the url of this breakpoint's image src
      */
-    src?: string;
+    src: string;
 }
 export interface ImageProps {
     /**
@@ -28,6 +28,10 @@ export interface ImageProps {
     /**
      * Specify the image src for the image
      */
-    url?: Required<Array<ImageUrl>>;
+    url: ImageUrl[];
+    /**
+     * Value to pass to lading attribute
+     */
+    loading?: "lazy" | "eager";
 }
 export {};

package/lib/types/react/src/components/LogoGrid/LogoGrid.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { LogoGridProps } from "./LogoGrid.props";
+declare const LogoGrid: React.FC<LogoGridProps>;
+export default LogoGrid;