@ilo-org/react 0.14.0 → 0.15.0

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

@@ -30,12 +30,15 @@ const cardMapper = {
     factlist: components_Cards_FactlistCard_FactListCard,
     data: components_Cards_DataCard_DataCard,
 };
-const CardGroup = ({ cards, cardCount, cta, type }) => {
-    const Cards = cardMapper[type];
+const CardGroup = ({ cards, titleLevel = "p", cardCount, cta, type, alignment, size, theme, collapsed = false, }) => {
+    const Card = cardMapper[type];
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--cardgroup`;
-    const cardGroupClasses = classNames(baseClass, `${baseClass}__count__${cardCount}`);
-    return (jsxRuntime.jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards && cards.map((card, index) => jsxRuntime.jsx(Cards, Object.assign({}, card), index)) })), cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
+    const cardGroupClasses = classNames(baseClass, `${baseClass}__count__${cardCount}`, {
+        [`${baseClass}__collapsed`]: collapsed,
+    });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards &&
+                    cards.map((card, index) => (jsxRuntime.jsx(Card, Object.assign({}, card, { size: size, theme: theme, alignment: alignment, titleLevel: titleLevel }), index))) })), cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
 };
 
 module.exports = CardGroup;

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

@@ -90,6 +90,7 @@ const textCardGroup = {
     ],
     cardCount: "three",
     type: "text",
+    size: "narrow",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",
@@ -135,6 +136,7 @@ const statCardGroup = {
         },
     ],
     cardCount: "three",
+    size: "narrow",
     type: "stat",
     cta: {
         label: "Discover our unique mission",
@@ -262,6 +264,7 @@ const multilinkCardGroup = {
     ],
     type: "multilink",
     cardCount: "three",
+    size: "standard",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",
@@ -270,7 +273,6 @@ const multilinkCardGroup = {
 const promoCardGroup = {
     cards: [
         {
-            size: "standard",
             title: "ILO welcomes first global agreement on working conditions",
             eyebrow: "Report",
             theme: "dark",
@@ -283,7 +285,6 @@ const promoCardGroup = {
             },
         },
         {
-            size: "standard",
             title: "Renewable energy jobs hits 12.7 million globally",
             eyebrow: "High-level meeting",
             theme: "dark",
@@ -296,7 +297,6 @@ const promoCardGroup = {
             },
         },
         {
-            size: "standard",
             title: "ILO welcomes G7 call to make a just transition",
             eyebrow: "Podcast",
             theme: "dark",
@@ -309,7 +309,6 @@ const promoCardGroup = {
             },
         },
         {
-            size: "standard",
             title: "Telangana and Andhra Pradesh launch pre-departure handbook",
             eyebrow: "High-level meeting",
             theme: "dark",
@@ -324,6 +323,7 @@ const promoCardGroup = {
     ],
     type: "promo",
     cardCount: "three",
+    size: "standard",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",
@@ -418,6 +418,7 @@ const featureCardGroup = {
     ],
     cardCount: "three",
     type: "feature",
+    size: "narrow",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",
@@ -476,6 +477,7 @@ const detailCardGroup = {
     ],
     type: "detail",
     cardCount: "three",
+    size: "narrow",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",
@@ -522,6 +524,7 @@ const factListCardGroup = {
     ],
     type: "factlist",
     cardCount: "three",
+    size: "narrow",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",
@@ -530,7 +533,7 @@ const factListCardGroup = {
 const dataCardGroup = {
     cards: [
         {
-            size: "standard",
+            size: "narrow",
             eyebrow: "Press release",
             image: "/small.jpg",
             columns: "one",
@@ -593,7 +596,6 @@ const dataCardGroup = {
             },
         },
         {
-            size: "standard",
             eyebrow: "Report",
             image: "/small.jpg",
             columns: "one",
@@ -652,7 +654,6 @@ const dataCardGroup = {
             },
         },
         {
-            size: "standard",
             eyebrow: "Meeting",
             image: "/small.jpg",
             columns: "one",
@@ -707,7 +708,6 @@ const dataCardGroup = {
             },
         },
         {
-            size: "standard",
             eyebrow: "Meeting",
             image: "/small.jpg",
             columns: "one",
@@ -776,6 +776,7 @@ const dataCardGroup = {
     ],
     cardCount: "three",
     type: "data",
+    size: "narrow",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",

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

@@ -7,14 +7,14 @@ require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
 
-const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, }) => {
+const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, titleLevel: TitleElement, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const cardClasses = classNames(baseClass, `${baseClass}__type__detail`, {
         [`${baseClass}__action`]: link,
         [`${baseClass}__size__${size}`]: size,
     });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--date-extra` }, { children: eventdetails })))] }))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--date-extra` }, { children: eventdetails })))] }))] }))] })));
 };
 
 module.exports = DetailCard;

package/lib/cjs/components/Cards/FactlistCard/FactListCard.js

@@ -9,14 +9,14 @@ require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
 
-const FactlistCard = ({ title, theme = "narrow", size, list, }) => {
+const FactlistCard = ({ title, theme, size = "narrow", list, titleLevel: TitleElement, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const cardClasses = classNames(baseClass, `${baseClass}__type__factlist`, {
         [`${baseClass}__size__${size}`]: size,
         [`${baseClass}__theme__${theme}`]: theme,
     });
-    return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), list && (jsxRuntime.jsx(components_List_List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: list.map((item, index) => (jsxRuntime.jsx(components_List_ListItem, Object.assign({ id: `list${index}` }, { children: jsxRuntime.jsx("p", { children: item }) })))) })))] })) })) })));
+    return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), list && (jsxRuntime.jsx(components_List_List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: list.map((item, index) => (jsxRuntime.jsx(components_List_ListItem, Object.assign({ id: `list${index}` }, { children: jsxRuntime.jsx("p", { children: item }) })))) })))] })) })) })));
 };
 
 module.exports = FactlistCard;

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

@@ -8,7 +8,7 @@ require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
 
-const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, }) => {
+const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, titleLevel: TitleElement, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const cardClasses = classNames(baseClass, `${baseClass}__type__feature`, {
@@ -18,7 +18,7 @@ const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, li
         [`${baseClass}__linklist`]: linklist,
         [`${baseClass}__theme__${theme}`]: theme,
     });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
 };
 
 module.exports = FeatureCard;

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

@@ -8,7 +8,7 @@ require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
 
-const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, intro, link, linklist, image, }) => {
+const MultilinkCard = ({ isvideo, eyebrow, title, size = "standard", alignment, intro, link, linklist, image, titleLevel: TitleElement, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const cardClasses = classNames(baseClass, `${baseClass}__type__multilink`, {
@@ -18,7 +18,7 @@ const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, in
         [`${baseClass}__isvideo`]: isvideo,
         [`${baseClass}__linklist`]: linklist,
     });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
 };
 
 module.exports = MultilinkCard;

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

@@ -7,7 +7,7 @@ require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
 
-const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, }) => {
+const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, titleLevel: TitleElement, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const wrapperClass = classNames(`${baseClass}--wrapper`, `${baseClass}--wrapper__type__promo ${baseClass}--wrapper__type__promo__size__${size}`);
@@ -17,7 +17,7 @@ const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, l
         [`${baseClass}__size__${size}`]: size,
         [`${baseClass}__theme__${theme}`]: theme,
     });
-    return (jsxRuntime.jsx("div", Object.assign({ className: wrapperClass }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: 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 })), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), 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 })) })))] })) }))] })) })));
+    return (jsxRuntime.jsx("div", Object.assign({ className: wrapperClass }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), 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 })) })))] })) }))] })) })));
 };
 
 module.exports = PromoCard;

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

@@ -8,14 +8,14 @@ require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
 
-const StatCard = ({ title, color, size = "standard", intro, source, }) => {
+const StatCard = ({ title, color, size = "standard", intro, source, titleLevel: TitleElement, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const cardClasses = classNames(baseClass, `${baseClass}__type__stat`, {
         [`${baseClass}__color__${color}`]: color,
         [`${baseClass}__size__${size}`]: size,
     });
-    return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), source && jsxRuntime.jsx(components_Link_Link, Object.assign({ url: source.url }, { children: source.label }))] })) })) })));
+    return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), source && jsxRuntime.jsx(components_Link_Link, Object.assign({ url: source.url }, { children: source.label }))] })) })) })));
 };
 
 module.exports = StatCard;

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

@@ -8,7 +8,7 @@ require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
 
-const TextCard = ({ eyebrow, title, theme, size, date, profile, link, }) => {
+const TextCard = ({ eyebrow, title, theme, size, date, profile, link, titleLevel: TitleElement, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const wrapperClass = classNames(`${baseClass}--wrapper`);
@@ -17,7 +17,7 @@ const TextCard = ({ eyebrow, title, theme, size, date, profile, link, }) => {
         [`${baseClass}__size__${size}`]: size,
         [`${baseClass}__theme__${theme}`]: theme,
     });
-    return (jsxRuntime.jsx("div", Object.assign({ className: wrapperClass }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: 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 })), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), 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__theme__${theme}` }))] })) }))] })) })));
+    return (jsxRuntime.jsx("div", Object.assign({ className: wrapperClass }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), 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__theme__${theme}` }))] })) }))] })) })));
 };
 
 module.exports = TextCard;

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

@@ -3,8 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-require('react');
 require('tslib');
+require('react');
 require('../../GlobalCtx-10114bdd.js');
 
 const LogoGridItem = ({ url, label, src }) => {

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

@@ -20,31 +20,57 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
     const { prefix } = hooks_useGlobalSettings();
     const [toggleMenuOpen, setMenuToggleOpen] = React.useState(false);
     const [toggleSearchOpen, setSearchToggleOpen] = React.useState(false);
+    const [searchTabbable, setSearchTabbable] = React.useState(false);
     const [toggleSubnavOpen, setSubnavToggleOpen] = React.useState(false);
+    const [subnavTabbable, setSubnavTabbable] = React.useState(false);
     const [toggleLanguageOpen, setLanguageToggleOpen] = React.useState(false);
     const baseClass = `${prefix}--header`;
     const NavigationClasses = classNames(baseClass, {
         [`${prefix}--mobile--open`]: toggleMenuOpen,
-        [`${prefix}--select--open`]: toggleLanguageOpen,
         [`${prefix}--search--open`]: toggleSearchOpen,
         [`${prefix}--subnav--open`]: toggleSubnavOpen,
+        [`${prefix}--select--open`]: toggleLanguageOpen,
+        [`${prefix}--context--open`]: toggleLanguageOpen,
     });
     const handleMenuToggle = () => {
         setMenuToggleOpen(!toggleMenuOpen);
     };
-    const handleLanguageToggle = () => {
+    const handleLanguageToggle = React.useCallback(() => {
         setLanguageToggleOpen(!toggleLanguageOpen);
-    };
+    }, [toggleLanguageOpen]);
     const handleSearchToggle = () => {
-        setSearchToggleOpen(!toggleSearchOpen);
+        if (toggleSearchOpen) {
+            setSearchToggleOpen(false);
+            setTimeout(() => setSearchTabbable(false), 225);
+            return;
+        }
+        setSearchTabbable(true);
+        setTimeout(() => setSearchToggleOpen(true), 10);
     };
     const handleSubnavToggle = () => {
-        setSubnavToggleOpen(!toggleSubnavOpen);
+        if (toggleSubnavOpen) {
+            setSubnavToggleOpen(false);
+            setTimeout(() => setSubnavTabbable(false), 125);
+            return;
+        }
+        setSubnavTabbable(true);
+        setTimeout(() => setSubnavToggleOpen(true), 10);
     };
-    return (jsxRuntime.jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxRuntime.jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
+    React.useEffect(() => {
+        if (window) {
+            if (toggleLanguageOpen) {
+                window.addEventListener("click", handleLanguageToggle);
+            }
+            else {
+                window.removeEventListener("click", handleLanguageToggle);
+            }
+            return () => window.removeEventListener("click", handleLanguageToggle);
+        }
+    }, [toggleLanguageOpen, handleLanguageToggle]);
+    return (jsxRuntime.jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button", onClick: handleLanguageToggle }, { children: languagelabel })), jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxRuntime.jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
                                                         languagecontextmenu.links.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link ${prefix}--nav--language` }, { children: item.label })) }), index))) }))] })) }))] })), jsxRuntime.jsxs("nav", Object.assign({ className: `${prefix}--nav`, "aria-labelledby": "primary-navigation" }, { children: [jsxRuntime.jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "primary-navigation" }, { children: primarynav === null || primarynav === void 0 ? void 0 : primarynav.navlabel })), jsxRuntime.jsxs("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: [(primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
-                                                primarynav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsxRuntime.jsx("nav", Object.assign({ className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--subnav--inner ${prefix}--container` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsxRuntime.jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
-                                        subnav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--search-box` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--header--inner ${prefix}--container` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
+                                                primarynav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsxRuntime.jsx("nav", Object.assign({ style: { display: subnavTabbable ? "block" : "none" }, className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--subnav--inner ${prefix}--container` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsxRuntime.jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
+                                        subnav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsxRuntime.jsx("div", Object.assign({ style: { display: searchTabbable ? "block" : "none" }, className: `${prefix}--search-box` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--header--inner ${prefix}--container` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
 };
 
 module.exports = Navigation;

package/lib/cjs/components/SocialMedia/SocialMedia.js

@@ -3,8 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-require('react');
 require('tslib');
+require('react');
 require('../../GlobalCtx-10114bdd.js');
 
 const SocialMedia = ({ className, theme = "light", justify = "start", headline, icons, }) => {

package/lib/cjs/hooks/index.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var hooks_useGlobalSettings = require('./useGlobalSettings.js');
-var hooks_useVideoPlayer = require('./useVideoPlayer.js');
 require('tslib');
 require('react');
 require('react/jsx-runtime');
@@ -10,4 +9,3 @@ require('../GlobalCtx-10114bdd.js');
 
 
 exports.useGlobalSettings = hooks_useGlobalSettings;
-exports.useVideoPlayer = hooks_useVideoPlayer;

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

@@ -28,12 +28,15 @@ const cardMapper = {
     factlist: FactlistCard,
     data: DataCard,
 };
-const CardGroup = ({ cards, cardCount, cta, type }) => {
-    const Cards = cardMapper[type];
+const CardGroup = ({ cards, titleLevel = "p", cardCount, cta, type, alignment, size, theme, collapsed = false, }) => {
+    const Card = cardMapper[type];
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--cardgroup`;
-    const cardGroupClasses = classNames(baseClass, `${baseClass}__count__${cardCount}`);
-    return (jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards && cards.map((card, index) => jsx(Cards, Object.assign({}, card), index)) })), cta && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
+    const cardGroupClasses = classNames(baseClass, `${baseClass}__count__${cardCount}`, {
+        [`${baseClass}__collapsed`]: collapsed,
+    });
+    return (jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards &&
+                    cards.map((card, index) => (jsx(Card, Object.assign({}, card, { size: size, theme: theme, alignment: alignment, titleLevel: titleLevel }), index))) })), cta && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
 };
 
 export { CardGroup as default };

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

@@ -88,6 +88,7 @@ const textCardGroup = {
     ],
     cardCount: "three",
     type: "text",
+    size: "narrow",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",
@@ -133,6 +134,7 @@ const statCardGroup = {
         },
     ],
     cardCount: "three",
+    size: "narrow",
     type: "stat",
     cta: {
         label: "Discover our unique mission",
@@ -260,6 +262,7 @@ const multilinkCardGroup = {
     ],
     type: "multilink",
     cardCount: "three",
+    size: "standard",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",
@@ -268,7 +271,6 @@ const multilinkCardGroup = {
 const promoCardGroup = {
     cards: [
         {
-            size: "standard",
             title: "ILO welcomes first global agreement on working conditions",
             eyebrow: "Report",
             theme: "dark",
@@ -281,7 +283,6 @@ const promoCardGroup = {
             },
         },
         {
-            size: "standard",
             title: "Renewable energy jobs hits 12.7 million globally",
             eyebrow: "High-level meeting",
             theme: "dark",
@@ -294,7 +295,6 @@ const promoCardGroup = {
             },
         },
         {
-            size: "standard",
             title: "ILO welcomes G7 call to make a just transition",
             eyebrow: "Podcast",
             theme: "dark",
@@ -307,7 +307,6 @@ const promoCardGroup = {
             },
         },
         {
-            size: "standard",
             title: "Telangana and Andhra Pradesh launch pre-departure handbook",
             eyebrow: "High-level meeting",
             theme: "dark",
@@ -322,6 +321,7 @@ const promoCardGroup = {
     ],
     type: "promo",
     cardCount: "three",
+    size: "standard",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",
@@ -416,6 +416,7 @@ const featureCardGroup = {
     ],
     cardCount: "three",
     type: "feature",
+    size: "narrow",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",
@@ -474,6 +475,7 @@ const detailCardGroup = {
     ],
     type: "detail",
     cardCount: "three",
+    size: "narrow",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",
@@ -520,6 +522,7 @@ const factListCardGroup = {
     ],
     type: "factlist",
     cardCount: "three",
+    size: "narrow",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",
@@ -528,7 +531,7 @@ const factListCardGroup = {
 const dataCardGroup = {
     cards: [
         {
-            size: "standard",
+            size: "narrow",
             eyebrow: "Press release",
             image: "/small.jpg",
             columns: "one",
@@ -591,7 +594,6 @@ const dataCardGroup = {
             },
         },
         {
-            size: "standard",
             eyebrow: "Report",
             image: "/small.jpg",
             columns: "one",
@@ -650,7 +652,6 @@ const dataCardGroup = {
             },
         },
         {
-            size: "standard",
             eyebrow: "Meeting",
             image: "/small.jpg",
             columns: "one",
@@ -705,7 +706,6 @@ const dataCardGroup = {
             },
         },
         {
-            size: "standard",
             eyebrow: "Meeting",
             image: "/small.jpg",
             columns: "one",
@@ -774,6 +774,7 @@ const dataCardGroup = {
     ],
     cardCount: "three",
     type: "data",
+    size: "narrow",
     cta: {
         label: "Discover our unique mission",
         url: "https://www.ilo.org",

package/lib/esm/components/Cards/DetailCard/DetailCard.js

@@ -5,14 +5,14 @@ import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
 
-const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, }) => {
+const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, titleLevel: TitleElement, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const cardClasses = classNames(baseClass, `${baseClass}__type__detail`, {
         [`${baseClass}__action`]: link,
         [`${baseClass}__size__${size}`]: size,
     });
-    return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsx("p", Object.assign({ className: `${baseClass}--date-extra` }, { children: eventdetails })))] }))] }))] })));
+    return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsx("p", Object.assign({ className: `${baseClass}--date-extra` }, { children: eventdetails })))] }))] }))] })));
 };
 
 export { DetailCard as default };

package/lib/esm/components/Cards/FactlistCard/FactListCard.js

@@ -7,14 +7,14 @@ import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
 
-const FactlistCard = ({ title, theme = "narrow", size, list, }) => {
+const FactlistCard = ({ title, theme, size = "narrow", list, titleLevel: TitleElement, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const cardClasses = classNames(baseClass, `${baseClass}__type__factlist`, {
         [`${baseClass}__size__${size}`]: size,
         [`${baseClass}__theme__${theme}`]: theme,
     });
-    return (jsx("div", Object.assign({ className: cardClasses }, { children: jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), list && (jsx(List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: list.map((item, index) => (jsx(ListItem, Object.assign({ id: `list${index}` }, { children: jsx("p", { children: item }) })))) })))] })) })) })));
+    return (jsx("div", Object.assign({ className: cardClasses }, { children: jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && TitleElement ? (jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), list && (jsx(List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: list.map((item, index) => (jsx(ListItem, Object.assign({ id: `list${index}` }, { children: jsx("p", { children: item }) })))) })))] })) })) })));
 };
 
 export { FactlistCard as default };